codespliting优化Vue打包步骤详解

在http1的时代，比较常见的一种性能优化就是合并http的请求数量，通常我们会把许多js代码合并在一起，但是如果一个js包体积特别大的话对于性能提升来说就有点矫枉过正了。而如果我们对所有的代码进行合理的拆分，将首屏和非首屏的代码进行剥离，将业务代码和基础库代码进行拆分，在需要某段代码的时候再加载它，下次若再需要用则从缓存中读取，一来可以更好地使用浏览器缓存，再者就是可以提高首屏加载速度，很好提升用户的体验。

核心思想

业务代码和基础库的分离

这个其实很好理解，业务代码通常更新迭代很频繁，而基础库通常更新缓慢，这里做拆分的话可以充分利用浏览器缓存来加载基础库代码。

按需异步加载

这个主要解决首屏请求大小的问题，我们在访问首屏的时候只需要加载首屏所需的逻辑，而不是加载所有路由的代码。

实战

最近，采用vuetify改造了一个内部系统，一开始用了最常用的webpack配置，功能很快开发了，可是一打包，发现效果不是很明显，打出很多大包

这里我们看下打包分布，这里使用的是 webpack-bundle-analyzer,可以很清晰的看到 vue 和 vuetify等模块都有出现 被重复打包的情况。

这里我们先贴一下配置，一边一会儿分析时用:

const path = require(&＃39;path&＃39;)
const webpack = require(&＃39;webpack&＃39;)
const CleanWebpackPlugin = require(&＃39;clean-webpack-plugin&＃39;)
const HtmlWebpackPlugin = require(&＃39;html-webpack-plugin&＃39;)
const BundleAnalyzerPlugin = require(&＃39;webpack-bundle-analyzer&＃39;).BundleAnalyzerPlugin;
const generateHtml = new HtmlWebpackPlugin({
title: &＃39;逍遥系统&＃39;,
template: &＃39;./src/index.html&＃39;,
minify: {
removeComments: true
}
})
module.exports = {
entry: {
vendor: [&＃39;vue&＃39;, &＃39;vue-router&＃39;, &＃39;vuetify&＃39;],
app: &＃39;./src/main.js&＃39;
},
output: {
path: path.resolve(dirname, &＃39;./dist&＃39;),
filename: &＃39;[name].[hash].js&＃39;,
chunkFilename:&＃39;[id].[name].[chunkhash].js&＃39;
},
resolve: {
extensions: [&＃39;.js&＃39;, &＃39;.vue&＃39;],
alias: {
&＃39;vue$&＃39;: &＃39;vue/dist/vue.esm.js&＃39;,
&＃39;public&＃39;: path.resolve(dirname, &＃39;./public&＃39;)
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: &＃39;vue-loader&＃39;,
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: &＃39;babel-loader&＃39;,
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: &＃39;file-loader&＃39;,
options: {
objectAssign: &＃39;Object.assign&＃39;
}
},
{
test: /\.css$/,
loader: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;]
},
{
test: /\.styl$/,
loader: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;, &＃39;stylus-loader&＃39;]
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: &＃39;#eval-source-map&＃39;,
plugins: [
new BundleAnalyzerPlugin(),
new CleanWebpackPlugin([&＃39;dist&＃39;]),
generateHtml,
new webpack.optimize.CommonsChunkPlugin({
name: &＃39;ventor&＃39;
}),
]
}
if (process.env.NODE_ENV === &＃39;production&＃39;) {
module.exports.devtool = &＃39;#source-map&＃39;
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
&＃39;process.env&＃39;: {
NODE_ENV: &＃39;"production"&＃39;
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

CommonChunkPlugin

ventor入口这里我们发现并没有筛选出所有引用的node_module下的模块 ，比如axios ,所以导致打包到了app.js里了，这里我们做下分离

entry: {
vendor: [&＃39;vue&＃39;, &＃39;vue-router&＃39;, &＃39;vuetify&＃39;, &＃39;axios&＃39;],
app: &＃39;./src/main.js&＃39;
},

那这里又出现个问题了，我不可能手动去手动录入模块，这时我们可能需要 自动化分离 ventor，这里我们需要引入 minChunks，在配置中我们就可以对所有mode_module下所引用的模块进行打包 修改配置如下

entry: {
//vendor: [&＃39;vue&＃39;, &＃39;vue-router&＃39;, &＃39;vuetify&＃39;, &＃39;axios&＃39;], //删除
app: &＃39;./src/main.js&＃39;
}
new webpack.optimize.CommonsChunkPlugin({
name: &＃39;vendor&＃39;,
minChunks: ({ resource }) => (
resource &&
resource.indexOf(&＃39;node_modules&＃39;) >= 0 &&
resource.match(/\.js$/)
)
}),

经过上面几步的优化，我们再看看文件分布，会发现node_module下的模块都收归到了vendor下了。

这里我们可以得到一个经验，就是在一个项目中可以专门针对node_module下的模块进行打包优化。但是这里细心的你可能发现codemirror组件不也是node_module中的么，但为啥没被打包进去反而重复打包到其他单页面了呢，其实这里是因为在commonChunk中使用name属性其实也就意味着只会沿着entry入口去找寻所依赖的包，由于我们的组件采用的是异步加载，故这里就不会去打包了，我们做个实验验证下，现在我们去掉dbmanage和system页面的路由懒加载改为直接引入

// const dbmanage = () => import(/* webpackChunkName: "dbmanage" */&＃39;../views/dbmanage.vue&＃39;)
// const system = () => import(/* webpackChunkName: "system" */&＃39;../views/system.vue&＃39;)
import dbmanage from &＃39;../views/dbmanage.vue&＃39;
import system from &＃39;../views/system.vue&＃39;

这时我们重新打包可以发现,codemirror被打包进来了，那么问题来了，这样子好么？

async

上面的问题答案是肯定的，不可以的，很明显ventor是我们的入口代码即首屏，我们完全没有必要去加载这个codemirror组件，我们先把刚才的路由修改恢复回去，但是这时又有了新问题，我们的codemirror被同时打包进了两个单页面，并且还有些自己封装的components，例如MTable或是MDataTable等也出现了重复打包。并且codemirror特别大，同时加载到两个单页面也会造成很大的性能问题,简单说就是，我们在访问第一个单页面加载了codemirror之后，在第二个页面其实就不应该再加载了。 要解决这个问题，这里我们可以使用 CommonsChunkPlugin 的 async 并在 minChunnks 里的count方法来判断数量，只要是 重用次数 超过两个包括两个的异步加载模块（即 import () 产生的chunk ）我们都认为是 可以 打成公共的 ，这里我们增加一项配置。

new webpack.optimize.CommonsChunkPlugin({
async: &＃39;used-twice&＃39;,
minChunks: (module, count) => (
count >= 2
),
})

再次打包，我们发现所有服用的组件被重新打到了 0.used-twice-app.js中了，这样各个单页面大小也有所下降，平均小了近10k左右

可是，这里我们发现vuetify.js和vuetify.css实在太庞大了，导致我们的打包的代码很大，这里，我们考虑把它提取出来，这里为了避免重复打包，需要使用external,并将vue以及vuetify的代码采用cdn读取的方式,首先修改index.html

//css引入


//js引入


//去掉main.js中之前对vuetifycss的引入
//import &＃39;vuetify/dist/vuetify.css&＃39;

再修改webpack配置，新增externals

externals: {
&＃39;vue&＃39;:&＃39;Vue&＃39;,
"vuetify":"Vuetify"
}

再重新打包,可以看到vue相关的代码已经没有了，目前也只有used-twice-app.js比较大了，app.js缩小了近200kb。

但是新问题又来了，codemirror很大，而used-twice又是首屏需要的，这个打包在首屏肯定不是很好，这里我们要将system和dbmanage页面的codemirror组件改为异步加载，单独打包，修改如下:

// import MCode from "../component/MCode.vue"; //注释掉
components: {
MDialog,
MCode: () => import(/* webpackChunkName: "MCode" */&＃39;../component/MCode.vue&＃39;)
},

重新打包下，可以看到 codemirror被抽离了，首屏代码进一步得到了减少,used-twice-app.js代码缩小了近150k。

做了上面这么多的优化之后，业务测的js基本都被拆到了50kb一下（忽略map文件），算是优化成功了。

总结

可能会有朋友会问，单独分拆vue和vuetify会导致请求数增加，这里我想补充下，我们的业务现在已经切换成http2了，由于多路复用，并且加上浏览器缓存，我们分拆出的请求数其实也算是控制在合理的范畴内。

这里最后贴一下优化后的webpack配置，大家一起交流学习下哈。

const path = require(&＃39;path&＃39;)
const webpack = require(&＃39;webpack&＃39;)
const CleanWebpackPlugin = require(&＃39;clean-webpack-plugin&＃39;)
const HtmlWebpackPlugin = require(&＃39;html-webpack-plugin&＃39;)
const BundleAnalyzerPlugin = require(&＃39;webpack-bundle-analyzer&＃39;).BundleAnalyzerPlugin;
const generateHtml = new HtmlWebpackPlugin({
title: &＃39;逍遥系统&＃39;,
template: &＃39;./src/index.html&＃39;,
minify: {
removeComments: true
}
})
module.exports = {
entry: {
app: &＃39;./src/main.js&＃39;
},
output: {
path: path.resolve(dirname, &＃39;./dist&＃39;),
filename: &＃39;[name].[hash].js&＃39;,
chunkFilename:&＃39;[id].[name].[chunkhash].js&＃39;
},
resolve: {
extensions: [&＃39;.js&＃39;, &＃39;.vue&＃39;],
alias: {
&＃39;vue$&＃39;: &＃39;vue/dist/vue.esm.js&＃39;,
&＃39;public&＃39;: path.resolve(dirname, &＃39;./public&＃39;)
}
},
externals: {
&＃39;vue&＃39;:&＃39;Vue&＃39;,
"vuetify":"Vuetify"
},
module: {
rules: [
{
test: /\.vue$/,
loader: &＃39;vue-loader&＃39;,
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: &＃39;babel-loader&＃39;,
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: &＃39;file-loader&＃39;,
options: {
objectAssign: &＃39;Object.assign&＃39;
}
},
{
test: /\.css$/,
loader: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;]
},
{
test: /\.styl$/,
loader: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;, &＃39;stylus-loader&＃39;]
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: &＃39;#eval-source-map&＃39;,
plugins: [
new CleanWebpackPlugin([&＃39;dist&＃39;]),
generateHtml
]
}
if (process.env.NODE_ENV === &＃39;production&＃39;) {
module.exports.devtool = &＃39;#source-map&＃39;
module.exports.plugins = (module.exports.plugins || []).concat([
new BundleAnalyzerPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: &＃39;ventor&＃39;,
minChunks: ({ resource }) => (
resource &&
resource.indexOf(&＃39;node_modules&＃39;) >= 0 &&
resource.match(/\.js$/)
)
}),
new webpack.optimize.CommonsChunkPlugin({
async: &＃39;used-twice&＃39;,
minChunks: (module, count) => (
count >= 2
),
}),
new webpack.DefinePlugin({
&＃39;process.env&＃39;: {
NODE_ENV: &＃39;"production"&＃39;
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

vue2.0实现注册登录步骤详解

bing Map使用步骤详解

以上就是code spliting优化Vue打包步骤详解的详细内容，更多请关注其它相关文章！