本文是继笔者上一篇文章<<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:all
"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
image.png
到这里我们的第三方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.json
manifest: 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.js
import 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，启动本地开发服务：
image.png
打包：npm run build，然后部署到nginx服务，启动nginx服务：
image.png
总结
之所以将 vendor.dll.js 放在 static/js 目录下，是为了方便开发和发布使用相同的路径。为了保持element-ui的js和样式版本一致，可以在项目中加入less或scss等，然后@import进来就可以了，这样打包的时候就会单独打包到css里面。
示例项目传送门：vue-spa-starter-kit，欢迎大家吐槽和 star！
作者：Cocokai
链接：https://juejin.im/post/5a3251ee6fb9a0450f21f6ac
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论