DllPlugin極大優化打包速度

2021-10-04 16:22:10 字數 555 閱讀 4192

1、安裝webpack4.x

2、建立  webpack.dll.config.js 的檔案

3、這樣寫入配置

const path = require('path');

const dllplugin = require('webpack/lib/dllplugin');

module.exports = ,

output: ,

plugins: [

new dllplugin()]};

4、 執行打包  webpack --config webpack.dll.config.js

接下來你將會得到這樣兩個

5、接下來在你的打包webpack配置裡面引入  .json的檔案

6、在你的頁面引入

第二個.js的檔案

7、npm run build 

是不是速度快了一大半,在依賴多的專案裡,表現的更明顯

webpack打包優化

tree shaking 使用import匯入的包,在生產環境下自動去除包內沒有引用的 這是webpack打包自帶的優化 import是es6引入規範 所以記得要裝babel require是common.js引入規範 scope hosting 在bundle.js檔案 module a.js e...

webpack 打包速度優化

const path require path const webpack require webpakc module.exports output plugins new webpack.dllplugin 混淆壓縮 new webpack.optimize.uglifyjsplugin 第三步...

vue之打包優化

最近寫專案,4個平台的專案由乙個 庫管理,超過50個.vue檔案,導致 量過大,每次構建打包速度都很慢,下面是針對vue打包構建優化的一些測試結果 第一次npm run dev 第一次npm run build構建 優化修改如下 1,採用cdn載入ui庫,把不常改變的庫放到index.html中,通...