使用Webpack提高Vue.js应用的方式汇总(四种)

2020-06-12 21:26:12易采站长站整理

  我们可以这样设置:只在生产环境中添加这些警告


if (process.env.NODE_ENV !== 'production') {
warn(("Error in " + info + ": "" + (err.toString()) + """), vm);
}

  如果process.env.NODE_ENV设置为生产,那么在构建过程中,这些警告块可以通过分解器自动从代码中删除。

  你可以使用DefinePlugin设置process.env.NODE_ENV的值,并使用UglifyJsPlugin来缩小代码并将未使用的块删除:


if (process.env.NODE_ENV === 'production') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin()
])
}

3. 浏览器缓存管理

  用户的浏览器将缓存你的站点的文件

 如果所有的代码都在一个文件中,那么一个微小的变化将意味着整个文件将需要重新下载。

理想情况下,你希望用户尽可能少的下载,因此在你的应用程序中将很少更改的代码和频繁更改的代码分开处理会更好

 3.1 Vendor 文件

  这个Common Chunks插件可以从你的应用程序代码(可能在每个部署中更改的代码)解耦你的vendor 代码(例如,Vue.js库)。

  你可以查看依赖项是否来自node_modules文件夹,如果是,则将其输出到单独的文件vendor.js中:


new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
})

  最后在构建输出中有两个单独的文件,这些文件将由浏览器独立缓存:


<script src="vendor.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>

 3.2 Fingerprinting

    构建文件发生变化时,我们如何修改浏览器的缓存?

  默认情况下,只有当缓存文件过期时,或者当用户手动清除缓存时,浏览器将再次从服务器请求该文件。 如果服务器指示文件已更改,则文件将被重新下载(否则服务器返回HTTP 304未修改)。

  为了保存不必要的服务器请求,我们可以在每次内容更改时更改文件的名称,以强制浏览器重新下载。 这样做的一个简单系统是通过附加一个哈希来为文件名添加一个“fingerprint”,例如: