前言
伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux, iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情
在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法。但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协。相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老就是不严谨
本文希望能在耗时优化与构建性能提升之间做一个平衡,即花最少的时间,对官方模板做最少的修改下,赚取最大的构建性能提升
<>强思路
早期版本的vue-cli和webpack2时代,网上流传以下优化配置,但其实新版本的vue-cli和webpack3已经不需要
<李>使用ParallelUglifyPlugin替换UglifyPlugin(新版本的UglifyPlugin已经支持且默认开启了多线程并行构建,所以此步骤没有必要)
<李>启用webpack3的范围提升(vue-cli新版本已经配置webapck3,且已经默认开启此配置)
<李>善用别名(新版本vue-cli已经进行此项工作)
<李>配置CommonsChunkPlugin提取公用代码(新版本vue-cli已经进行此项工作)
对于新版本的vue-cli和webpack3,以下简单配置优化后可提升最少2倍的构建速度
<李>按需引用李
<李>启用happypack多核构建项目李
<李>修改源图配置李
<李>启用DllPlugin和DllReferencePlugin预编译库文件
<>强实践
<强> 1,按需引用
1.1几乎所有的第三方组件框架都会提供组件的按需引用方式,以iview为例,通过借助插件babel-plugin-import可以实现按需加载组件,减少文件体积,只需要修改.babelrc文件
npm安装babel-plugin-import——save-dev//.babelrc
{
“插件”:[[“进口”,{
:“libraryName iview”,
:“libraryDirectory src/组件”
}]]
}
之前
1.2然后这样按需引入组件,就可以减小体积了
从“iview”进口{按钮}
Vue.component(“表”,表)
<强> 2,启用happypack多核构建项目
安装happypack后,修改/构建/webpack.base.conf。js文件即可
npm安装happypack——save-dev///构建/webpack.base.conf.js
const HappyPack=要求(“HappyPack”)
const os=要求(“操作系统”)
const happyThreadPool=HappyPack。ThreadPool({大小:os.cpus ()。长度})//增加HappyPack插件
插件:[
新HappyPack ({
id:“happy-babel-js”,
加载器:[' babel-loader& # 63; cacheDirectory=true”),
threadPool: happyThreadPool,
})
]//修改引入加载程序
{
测试:/\ . js/美元,//加载程序:“babel-loader”,
装载机:“happypack/装载机# 63;id=happy-babel-js ',//增加新的happypack构建加载程序
包括:[解决(src),解决(测试)]
}
之前
<强> 3,修改源图配置
3.1首先修改/config/索引。js文件
///config/index.js
dev环境:devtool:“eval”(最快速度)
刺激环境:productionSourceMap: false(关闭源映射)
3.2然后修改/src/主要。js文件,关闭生产环境的调试信息
///src/main.js
const isDebug_mode=process.env。NODE_ENV !==吧?
Vue.config.debug=isDebug_mode
Vue.config.devtools=isDebug_mode
Vue.config。productionTip=isDebug_mode
<强> 4,启用DllPlugin和DllReferencePlugin预编译库文件
这是最复杂也是提升效果最明显的一步,原理是将第三方库文件单独编译打包一次,以后的构建都不需要再编译打包第三方库
构建/webpack.dll.config 4.1增加。js文件,并在其中配置需要单独DLL化的模块
const path=要求(“路径”)
const webpack=要求(“webpack”)
模块。出口={//你想要打包的模块的数组
条目:{
供应商:[‘vue/dist/vue.esm.js’,‘axios’,‘vue-router’,‘iview’)
},
输出:{
路径:路径。加入(__dirname“. ./静态/js”),//打包后文件输出的位置
文件名:“[名字].dll.js”,
图书馆:“[名字]_library”
},
插件:[
新webpack.DllPlugin ({
路径:路径。加入(__dirname”。”、“[名字]-manifest.json”),
名称:“[名字]_library”,
背景:__dirname
}),//压缩打包的文件
新webpack.optimize.UglifyJsPlugin ({
压缩:{
警告:假
}
})
]
}
