能讓你的vue項(xiàng)目打包速度提升80%
不知道大家有沒有這種感受，vue-cli項(xiàng)目慢慢大起來(lái)后打包速度超慢，每次打包3-5分鐘你能接受嗎？尤其在修復(fù)bug時(shí)候我們經(jīng)常需要提交代碼到測(cè)試服，打包成了最耗時(shí)的一個(gè)步驟，那么怎樣去優(yōu)化呢
配置 resolve.modules
1、webpack 的 resolve.modules 是用來(lái)配置模塊庫(kù)（即 node_modules）所在的位置。當(dāng) js 里出現(xiàn) import 'vue' 這樣不是相對(duì)、也不是絕對(duì)路徑的寫法時(shí)，它便會(huì)到 node_modules 目錄下去找。
2、在默認(rèn)配置下，webpack 會(huì)采用向上遞歸搜索的方式去尋找。但通常項(xiàng)目目錄里只有一個(gè) node_modules，且是在項(xiàng)目根目錄。為了減少搜索范圍，可我們以直接寫明 node_modules 的全路徑。
3、最終速度提升不是很明顯，但有總比沒好
打開build/webpack.base.conf.js 文件，新增配置項(xiàng)
module.exports?=?{
?resolve:?{
??extensions:?['.js',?'.vue',?'.json'],
???// 新增start
??modules:?[
???resolve('src'),
???resolve('node_modules')
???],
???// 新增end
??alias:?{
????'vue$':?'vue/dist/vue.esm.js',
????'@':?resolve('src'),
???}
??},
webpack-parallel-uglify-plugin插件來(lái)壓縮代碼
1、默認(rèn)情況下 webpack 使用 UglifyJS 插件進(jìn)行代碼壓縮，但由于其采用單線程壓縮，速度很慢。
2、我們可以改用 webpack-parallel-uglify-plugin 插件，它可以并行運(yùn)行 UglifyJS 插件，從而更加充分、合理的使用 CPU 資源，從而大大減少構(gòu)建時(shí)間。
執(zhí)行如下命令安裝 webpack-parallel-uglify-plugin
1
npm i webpack-parallel-uglify-plugin?// 注意安裝版本
打開 build/webpack.prod.conf.js 文件，并作如下修改：
const?ParallelUglifyPlugin?=?require('webpack-parallel-uglify-plugin');?// 引入插件
minimizer:?[
????// 刪掉webpack提供的UglifyJS插件
????// new UglifyJsPlugin({
????//?uglifyOptions: {
????//??mangle: {
????//???safari10: true
????//??}
????//?},
????//?sourceMap: config.build.productionSourceMap,
????//?cache: true,
????//?parallel: true
????// }),
????new?ParallelUglifyPlugin({
?????// 傳遞給 UglifyJS的參數(shù)如下：
????uglifyJS:?{
?????output:?{
???????/*
???????是否輸出可讀性較強(qiáng)的代碼，即會(huì)保留空格和制表符，默認(rèn)為輸出，為了達(dá)到更好的壓縮效果，
???????可以設(shè)置為false
??????*/
??????beautify:?false,
???????/*
???????是否保留代碼中的注釋，默認(rèn)為保留，為了達(dá)到更好的壓縮效果，可以設(shè)置為false
??????*/
??????comments:?false
??????},
?????compress:?{
???????/*
???????是否刪除代碼中所有的console語(yǔ)句，默認(rèn)為不刪除，開啟后，會(huì)刪除所有的console語(yǔ)句
??????*/
??????drop_console:?true,
???????/*
???????是否內(nèi)嵌雖然已經(jīng)定義了，但是只用到一次的變量，比如將 var x = 1; y = x, 轉(zhuǎn)換成 y = 5, 默認(rèn)為不
???????轉(zhuǎn)換，為了達(dá)到更好的壓縮效果，可以設(shè)置為false
??????*/
??????collapse_vars:?true,
???????/*
???????是否提取出現(xiàn)了多次但是沒有定義成變量去引用的靜態(tài)值，比如將 x = 'xxx'; y = 'xxx'?轉(zhuǎn)換成
???????var a = 'xxxx'; x = a; y = a; 默認(rèn)為不轉(zhuǎn)換，為了達(dá)到更好的壓縮效果，可以設(shè)置為false
??????*/
??????reduce_vars:?true
??????}
?????},
?????/*
???????是否在UglifyJS刪除沒有用到的代碼時(shí)輸出警告信息，默認(rèn)為輸出，可以設(shè)置為false關(guān)閉這些作用
???????不大的警告
??????*/
????warnings:?false
????}),
????// Compress extracted CSS. We are using this plugin so that possible
????// duplicated CSS from different components can be deduped.
????new?OptimizeCSSAssetsPlugin()
???]
打包報(bào)錯(cuò)：`warnings` is not a supported option解決
如果安裝這個(gè)插件后出現(xiàn)這個(gè)報(bào)錯(cuò)問題，那么應(yīng)該你不是按照我上面配置來(lái)的，warning配置不對(duì)。在很多教程上warning選項(xiàng)放在了compress里，而實(shí)際最后查官方文檔所知，應(yīng)該單獨(dú)拿出來(lái)，如下：
1
2
3
4
5
compress:?{
warnings:?false
}
改為：
warnings:?false
[cc lang='php']
