一、升級webpack到4.0

二、前端工程化

參考上篇文章： 地址

三、路由異步加載

參考上篇文章： 地址

四、優化babel

對于Loader來說，影響打包效率首當齊沖必屬Babel了。因為babel會將代碼轉為字符串生成AST，然后對AST繼續進行轉變最后生成新的代碼，項目越大，轉化代碼越多，效率就越低。當然了，我們是有辦法優化的。

module.exports={module:[rules:[{//js文件才使用babeltest:'\.js$',loader:'babel-loader',//只在src文件夾下查找include:[resolve('src')],//不會去查找路徑exclude：/node_modules/}]} }

對于Babel來說，我們肯定是希望只作用在JS代碼上的，然后node_modules中使用的到嗎都是編譯過的，所以我們也完全沒有必要再去處理一遍…
當然這樣做還不夠，我們還可以將Babel編譯過的文件緩存起來，下次只需要編譯更改過的代碼文件即可，這樣我們可以大幅度加快打包時間。

loader:'babel-loader?cacheDirectory=true'

(1) HappyPack
受限于Node是單線程運行的，所以Webpack在打包的過程中也是單線程的，特別是在執行Loader的時候，長時間編譯的任務很多，這樣就會導致等待的情況。
HappyPack可以將Loader的同步執行轉換為并行的，這樣就能充分利用系統資源來加快打包效率了。

module:{loaders:[{test:/\.js$/,include:[resolve('src')],exclude:/node_modules/,//id后面的內容下面loader:'happypack/loader?id=happybabel'} ] }, plugins:[new HappyPack({id:'Happybabel',loaders:['babel-loader?cacheDirectory'],//開啟4個線程threads：4 }) ]

(2)DllPlugin
DllPlugin可以將特定的類庫提前打包然后引入。這種方式可以極大的減少打包類庫的次數，只有當類庫更新版本才有需要重新打包，并且也實現了將公共代碼抽離成單獨文件的優化方案。

//單獨配置在一個文件中 const path=require('path'); const webpack=require('webpack'); module.export={entry:{//統一打包類庫vendor:['react']; },output:{path:path.join(__dirname,'dist'),filename:'[name].dll.js',library:'[name]-[hash]' },plugins:[new webpack.Dllplugin({name:'[name]-[hash]',context:__dirname,path:path.join(__dirname,'dist','[name]-manifest.json') }) ] }

然后我們需要指向這個配置文件生成依賴文件，接下來我們需要使用DllReferencePlugin將依賴文件引入項目中

//webpack.conf.js module.exports={plugins:[new webpack.DllRefercePlugin({context:__dirname,manifest:require('./dist/vendor-manifest.json'),})] }

參考鏈接： 地址

五、代碼壓縮

在webpack3中，我們一般使用UglifyJS來壓縮代碼，但是這個是單線程運行的，為了加快效率，我們可以使用webpack-parallel-uglify-plugin來運行UglifyJS，從而提交效率。
在webpack4中，我們就不需要以上操作了，只需要將mode設置為production就可以默認開啟以上功能。代碼壓縮也是我們必做的性能優化方案，當然我們不知可以壓縮JS代碼，還可以壓縮HTML、CSS代碼，并且在壓縮JS代碼的過程中，我們還可以通過配置實現比如刪除console.log這類代碼的功能。

uglifyjs-webpack-plugin 地址

常規配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = {optimization: {minimizer: [new UglifyJsPlugin()],}, };

選項多的配置：

// 引入 ParallelUglifyPlugin 插件 const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');module.exports = {plugins: [// 使用 ParallelUglifyPlugin 并行壓縮輸出JS代碼new ParallelUglifyPlugin({// 傳遞給 UglifyJS的參數如下：uglifyJS: {output: {/*是否輸出可讀性較強的代碼，即會保留空格和制表符，默認為輸出，為了達到更好的壓縮效果，可以設置為false*/beautify: false,/*是否保留代碼中的注釋，默認為保留，為了達到更好的壓縮效果，可以設置為false*/comments: false},compress: {/*是否在UglifyJS刪除沒有用到的代碼時輸出警告信息，默認為輸出，可以設置為false關閉這些作用不大的警告*/warnings: false,/*是否刪除代碼中所有的console語句，默認為不刪除，開啟后，會刪除所有的console語句*/drop_console: true,/*是否內嵌雖然已經定義了，但是只用到一次的變量，比如將 var x = 1; y = x, 轉換成 y = 5, 默認為不轉換，為了達到更好的壓縮效果，可以設置為false*/collapse_vars: true,/*是否提取出現了多次但是沒有定義成變量去引用的靜態值，比如將 x = 'xxx'; y = 'xxx' 轉換成var a = 'xxxx'; x = a; y = a; 默認為不轉換，為了達到更好的壓縮效果，可以設置為false*/reduce_vars: true}}}),] }

參考地址：地址

六、代碼壓縮

（1）reslove.extensions:
用來表明文件后綴名列表，默認查找順序是[’.js’,’.json’],如果你的導入文件沒有添加后綴就會按照這個順序查找文件。我們應該盡可能減少后綴列表長度，然后將出現頻率高的后綴排在前面。
（2）resolve.alias:
可以通過別名的方式來映射一個路徑，能讓webpack更快找到路徑
（3）module.noParse:
如果你確定一個文件下沒有其他依賴，就可以使用該屬性讓webpack不掃描該文件，這種方式碎玉大型類庫很有幫助

七、減少webpack打包后的文件體積

（1）按需加載
相比大家在開發SPA項目的時候，項目中都會在十幾甚至更多的路由頁面。如果我們將這些頁面全部打包進入一個JS文件的話，雖然將多個請求合并了，但是同樣也加載了很多并不需要的代碼，耗費了更長的時間。那么為了首頁能更快地呈現給用戶，我們肯定希望首頁能加載文件體積越小越好，這時候我們就可以使用按序加載，將每個路由頁面單獨為一個文件，當然不僅僅路由可以按需加載，對于loadash這種大型類庫同樣可以使用這個功能。按需加載的底層機制都是當使用的時候再去下載的對應文件，返回一個Promise，當Promi

（2）Scope Hoisting
Scope Hoisting會分析出模塊之間的依賴關系，盡可能的把打包出來的模塊合并到一個函數中去。

（3）Tree Shaking
Tree Shaking可以實現刪除項目中未被引用的代碼，比如：

//test.js export const a=1 export const b=2 //index.js import {a} from './test.js'

對于以上情況，test文件中的變量b如果沒有在項目中使用到的話，就不會被打包到文件中。如果你使用webpack4的話，開啟生產環境就會自動啟動這個優化功能。

總結

以上是生活随笔為你收集整理的缩短编译和打包时间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。