Vue SPA 打包优化实践

本文是继笔者上一篇文章<<Vue SPA 首屏加载优化实践>>基础上进一步优化的实践经验分享！

随着我们的项目的增长，打包会越来越慢。每次打包都会将第三方的js打包一遍，但是这些第三方的不会经常变化，如何能将第三方的js只打包一次呢？

异步组件

我们先将路由组件改成异步组件。官方文档

// src/router/index.js...
export default new VueRouter({routes: [{path: '/',name: 'HelloWorld',component: resolve => require(['@/components/HelloWorld'], resolve)}]
})
复制代码

webpack DllPlugin

webpack提供了一个插件 DllPlugin ，用于将不常变动的js单独打包。

首先我们在src目录下新建 vendor.js 来import 第三方的js：

import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import {sync} from 'vuex-router-sync'
import axios from 'axios'
import ElementUI from 'element-ui'
复制代码

这里只需要import进来就行了。

在build目录下新建 webpack.dll.conf.js 配置文件：

var path = require('path')
var webpack = require('webpack')var context = path.join(__dirname, '..')module.exports = {entry: {vendor: ['./src/vendor.js'] // entry 以项目根目录为起始路径},output: {// 将打包后的 js 放到 static 目录下，build的时候会copy到dist目录path: path.join(context, 'static/js'),filename: '[name].dll.js',library: '[name]'},resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'}},plugins: [new webpack.DllPlugin({path: path.join(context, '[name].manifest.json'),name: '[name]',context: context}),// 压缩js代码new webpack.optimize.UglifyJsPlugin({compress: {warnings: false},output: { // 删除打包后的注释comments: false}})]
}
复制代码

这里的 context 非常关键，我这里以项目的根路径作为context，manifest.json的位置可自由定义，name要和output里面的library保持一致。resolve 里将 webpack.base.conf.js 里面的 vue$ copy过来，vue用的是vue.esm.js。需要注意的是 dllPlugin 只支持 Array 类型的 entry。

在 package.json 里面加上 script ：build:dll

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","lint": "eslint --ext .js,.vue src","build": "node build/build.js","build:dll": "webpack --config build/webpack.dll.conf.js --progress"
}
复制代码

运行 npm run build:dll，会在 static/js 里面生成 vendor.dll.js

到这里我们的第三方js就打包完了，那么如何使用呢？

webpack DllReferencePlugin

webpack提供了DllReferencePlugin。修改 build/webpack.base.conf.js：

const webpack = require('webpack')module.exports = {...plugins: [new webpack.DllReferencePlugin({// name参数和dllplugin里面name一致，可以不传name: 'vendor',// dllplugin 打包输出的manifest.jsonmanifest: require('../vendor.manifest.json'),// 和dllplugin里面的context一致context: path.join(__dirname, '..')})]...
}
复制代码

注意：这里的context一定要和dllplugin里面的context保持一致

修改 build/webpack.prod.js。删除上一篇文章中配置的externals配置项：

module.exports = {...// externals: {//   'vue': 'Vue',//   'vuex': 'Vuex',//   'vue-router': 'VueRouter',//   'element-ui': 'ELEMENT'// }...plugins: [...// 去掉这里的CommonsChunkPlugin// new webpack.optimize.CommonsChunkPlugin({//   name: 'vendor',//   minChunks (module) {//     // any required modules inside node_modules are extracted to vendor//     return (//       module.resource &&//       /\.js$/.test(module.resource) &&//       module.resource.indexOf(//         path.join(__dirname, '../node_modules')//       ) === 0//     )//   }// }),// 去掉这里的CommonsChunkPlugin// new webpack.optimize.CommonsChunkPlugin({//   name: 'manifest',//   minChunks: Infinity// }),...]
}
复制代码

去掉这两个CommonsChunkPlugin，因为我们已经通过dllplugin打包了，这里就不需要了。

将 index.dev.html 和 index.prod.html 合并成一个文件 index.html，去掉CDN资源，引入 vendor.dll.js：

<head>...<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css">
</head><body><div id="app"></div><!-- built files will be auto injected --><script src="static/js/vendor.dll.js"></script>
</body>
复制代码

这里 element-ui 的样式文件依然采用CDN加载，因为我们没有将样式打包到vendor.dll.js里面

修改 webpack.dev.conf.js 和 webpack.prod.conf.js 里面的模板文件的配置：

...
plugins: [...new HtmlWebpackPlugin({template: 'index.html'})
]
复制代码

修改 src 里面 vuex、vue-router 的使用：

// src/router/index.jsimport Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)
复制代码

至此，我们所有的准备工作就做完了。接下来运行npm run dev，启动本地开发服务：

打包：npm run build，然后部署到nginx服务，启动nginx服务：

总结

之所以将 vendor.dll.js 放在 static/js 目录下，是为了方便开发和发布使用相同的路径。为了保持element-ui的js和样式版本一致，可以在项目中加入less或scss等，然后@import进来就可以了，这样打包的时候就会单独打包到css里面。

示例项目传送门：vue-spa-starter-kit，欢迎大家吐槽和 star！