前言
伴随着vue的全球化,各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情
在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法。但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协。相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老就是不严谨 本文希望能在耗时优化与构建性能提升之间做一个平衡,即花最少的时间,对官方模板做最少的修改下,赚取最大的构建性能提升
思路
早期版本的vue-cli和webpack2时代,网上流传以下优化配置,但其实新版本的vue-cli和webpack3已经不需要
-
使用ParallelUglifyPlugin替换UglifyPlugin(新版本的UglifyPlugin已经支持且默认开启了多线程并行构建,所以此步骤没有必要)
-
启用webpack3的Scope Hoisting(vue-cli新版本已经配置webapck3,且已经默认开启此配置)
-
善用alias(新版本vue-cli已经进行此项工作)
-
配置CommonsChunkPlugin提取公用代码(新版本vue-cli已经进行此项工作)
对于新版本的vue-cli和webpack3,以下简单配置优化后可提升最少2倍的构建速度
- 按需引用
- 启用happypack多核构建项目
- 修改source-map配置
- 启用DllPlugin和DllReferencePlugin预编译库文件
实践
1、按需引用
1.1 几乎所有的第三方组件框架都会提供组件的按需引用方式,以iview为例,通过借助插件babel-plugin-import可以实现按需加载组件,减少文件体积,只需要修改.babelrc
文件
npm install babel-plugin-import --save-dev
// .babelrc
{
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]]
}
复制代码
1.2 然后这样按需引入组件,就可以减小体积了
import { Button } from 'iview'
Vue.component('Table', Table)
复制代码
2、启用happypack多核构建项目
安装happypack后,修改/build/webpack.base.conf.js
文件即可
npm install happypack --save-dev
// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
new HappyPack({
id: 'happy-babel-js',
loaders: ['babel-loader?cacheDirectory=true'],
threadPool: happyThreadPool,
})
]
// 修改引入loader
{
test: /\.js$/,
// loader: 'babel-loader',
loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
include: [resolve('src'), resolve('test')]
}
复制代码
3、修改source-map配置
3.1 首先修改/config/index.js
文件
// /config/index.js
dev环境:devtool: 'eval'(最快速度)
prod环境:productionSourceMap: false(关闭source-map)
复制代码
3.2 然后修改/src/main.js
文件,关闭生产环境的调试信息
// /src/main.js
const isDebug_mode = process.env.NODE_ENV !== 'production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode
复制代码
4、启用DllPlugin和DllReferencePlugin预编译库文件
这是最复杂也是提升效果最明显的一步,原理是将第三方库文件单独编译打包一次,以后的构建都不需要再编译打包第三方库
4.1 增加build/webpack.dll.config.js
文件,并在其中配置需要单独DLL化的模块
const path = require("path")
const webpack = require("webpack")
module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// 压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
复制代码
4.2 在build/webpack.dev.conf.js
和 build/webpack.prod.conf.js
增加如下插件
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
})
复制代码
4.3 在/package.json
增加命令
"dll": "webpack --config ./build/webpack.dll.config.js"
复制代码
4.4 在/index.html
增加DLL化JS引入(必须首先引入)