很多用Vue开发的项目中，都会遇到首屏加载慢，chunk-vendor.js动不动就好几MB，那么如何通过Vue的内部配置去优化我们的Vue项目呢?这是手头的一个项目，同样的源码，同样的服务器，打开了Disable cache，目前完全加载是6.82秒
优化后，加载时间才2.59秒，提升了60%的加载
其实出发点还是比较好理解的，压缩js和使用CDN因为我这边用的Linux服务器，然后安装的宝塔，使用的Nginx，默认是开启了Gzip，所以我们可以先安装compression-webpack-pluginyarn add compression-webpack-plugin或者npm install compression-webpack-plugin
然后，我们在vue.config.js中做如下的配置const CompressionWebpackPlugin = require('compression-webpack-plugin')module.exports = { productionSourceMap: false, configureWebpack: config => { if (isProduction) { // 开启gzip压缩 config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.js$|\.html$|\.json$|\.css/, threshold: 10240, minRatio: 0.8 })) } }}
这样，Gzip就可以在打包的时候生成了，如下图，打包前后体积还是很明显的，但是这样是不够的
为了防止文件过大，我们先把公共代码分离config.optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] return `npm.${packageName.replace('@', '')}` } } } }}
打包后的效果，如下图
那么，在最后就是用CDN这里就引入一个vue.js作为例子config.externals = { vue: 'Vue'}
需要在你的public/index.html的body标签中引用对应版本的vue.js
然后整体打包，ok，附上完整的vue.config.jsconst path = require('path')const CompressionWebpackPlugin = require('compression-webpack-plugin')const appname = 'index'function resolve(dir) { return path.join(__dirname, dir)}const isProduction = process.env.NODE_ENV === 'production'// vue.config.jsmodule.exports = { productionSourceMap: false, outputDir: appname + 'OutPutFile', // 运行时生成的生产环境构建文件的目录(默认""dist""，构建之前会被清除) assetsDir: appname + 'public', //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认"") indexPath: appname + '.html', //指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。 configureWebpack: config => { if (isProduction) { // 开启gzip压缩 config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.js$|\.html$|\.json$|\.css/, threshold: 10240, minRatio: 0.8 })) config.optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] return `npm.${packageName.replace('@', '')}` } } } } } config.performance = { hints: 'warning', //入口起点的最大体积 maxEntrypointSize: 50000000, //生成文件的最大体积 maxAssetSize: 30000000, //只给出 js 文件的性能提示 assetFilter: function(assetFilename) { return assetFilename.endsWith('.js') } } config.externals = { vue: 'Vue' } } }, chainWebpack: (config) => { config.resolve.alias .set('@$', resolve('src')) .set('@api', resolve('src/api')) .set('@assets', resolve('src/assets')) .set('@comp', resolve('src/components')) .set('@views', resolve('src/views')) .set('@layout', resolve('src/layout')) .set('@static', resolve('src/static')) }, css: { }, lintOnSave: undefined}
最后的一点建议，如果条件允许，能走cdn尽量走cdn，效果还是比较惊人的。
如何解决webpack打包后，dist文件过大的问题
去除不必要的插件刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式，都没多大效果。所以，如果你打包后的文件非常大的话，先检查下是不是包含了这些插件。
提取第三方库
像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置
{
entry: {
bundle: 'app'
vendor: ['react']
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor','vendor.js')
}
}
这样打包之后就会多出一个 vendor.js 文件，之后在引入我们自己的代码之前，都要先引入这个文件。比如在 index.html 中
<script src="/build/vendor.js"></script>
<script src="/build/bundle.js"></script>
除了这种方式之外，还可以通过引用外部文件的方式引入第三方库，比如像下面的配置
{
externals: {
'react': 'React'
}
}
externals 对象的 key 是给 require 时用的，比如 require('react')，对象的 value 表示的是如何在 global 中访问到该对象，这里是 window.React。这时候 index.html 就变成下面这样
<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="/build/bundle.js"></script>
当然，个人更推荐第一种方式。
代码压缩
webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可。
{
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。
另外，服务器端还可以开启 gzip 压缩，优化的效果更明显。
代码分割
什么是代码分割呢？我们知道，一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说，我们更想要的是只加载当前 UI 的代码，没有点击的部分不加载。
看起来好像挺麻烦，但是通过 webpack 的 code split 以及配合 react router 就可以方便实现。具体的例子可以看下 react router 的官方示例 huge apps。不过这里还是讲下之前配置踩过的坑。
code split 是不支持 ES6 的模块系统的，所以在导入和导出的时候千万要注意，特别是导出。如果你导出组件的时候用 ES6 的方式，这时候不管导入是用 CommomJs 还是 AMD，都会失败，而且还不会报错！
当然会踩到这个坑也是因为我刚刚才用 NodeJS，而且一入门就是用 ES6 的风格。除了这个之外，还有一点也要注意，在生产环境的 webpack 配置文件中，要加上 publicPath
output: {
path: xxx,
publicPath: yyy,
filename: 'bundle.js'
}
不然的话，webpack 在加载 chunk 的时候，路径会出错。
设置缓存
开始这个小节之前，可以先看下大神的一篇文章：大公司里怎样开发和部署前端代码。
对于静态文件，第一次获取之后，文件内容没改变的话，浏览器直接读取缓存文件即可。那如果缓存设置过长，文件要更新怎么办呢？嗯，以文件内容的 MD5 作为文件名就是一个不错的解决方案。来看下用 webpack 应该怎样实现
output: {
path: xxx,
publicPath: yyy,
filename: '[name]-[chunkhash:6].js'
}
打包后的文件名加入了 hash 值
const bundler = webpack(config)
bundler.run((err, stats) => {
let assets = stats.toJson().assets
let name
for (let i = 0; i < assets.length; i++) {
if (assets[i].name.startsWith('main')) {
name = assets[i].name
break
}
}
fs.stat(config.buildTemplatePath, (err, stats) => {
if (err) {
fs.mkdirSync(config.buildTemplatePath)
}
writeTemplate(name)
})
})
手动调用 webpack 的 API，获取打包后的文件名，通过 writeTemplate 更新 html 代码。完整代码猛戳 gitst。
npm run build 打包优化
1、优化之前 是?2、 去掉console.log、警告、注释、debugger
参照：/lmy0111ly/article/details/93979006
blogs.com/jishugaochao/p/10180416.html
webpack.prod.conf中UglifyJsPlugin配置
线上去掉查看源码功能：sourceMap：false
去掉注释 ：comments:false,
缓存：cache:true,
去掉console.log\警告、注释、debugger
drop_console: true, drop_debugger:true, pure_funcs: ['console.log']
优化了一大半?
3. 关闭Prefetch
4、启用DllPlugin和DllReferencePlugin预编译库文件
参照： https://juejin.im/post/5a622613f265da3e5342475c
5、minChunks: 3
