webpack 打包速度優化

2021-08-22 00:16:33 字數 1390 閱讀 8299

const path = require('path');

const webpack = require('webpakc')

module.exports = ,

output:,

plugins:[

new webpack.dllplugin(),

// 混淆壓縮

new webpack.optimize.uglifyjsplugin()

]}

第三步: 命令列打包: webpack –config build/webpack.dll.config.js

第四部: 在webpack.prod.conf.js中加入如下**:

plugin:[

new webpack.dllreferenceplugin(),

new webpack.dllreferenceplugin()

....]

方法二: 並行進行**壓縮混淆

外掛程式: uglifyjsplugin 壓縮混淆**

設定:paraller cache

// 修改webpack.prod.conf.js

plugins:[

new uglifyjsplugin(

},sourcemap: false,

parallel: true , // 並行處理打包檔案

cache: true, // 使用快取

})]

// 修改webpack.prod.conf

plugins:[

id:'vue',

loaders:[

]})

//修改webpack.base.conf.js

,

四: babel-loader

開啟快取: options.cachedirectory

include/exclude: 規定打包的範圍

//修改webpack.base.conf.js

,// 修改include 減少babel-loader的處理範圍

include: [resolve('src')]

//resolve('test'), 開發環境使用

//resolve('node_modules/webpack-dev-server/client') 開發環境使用

其他因素:

減少resolve

devtool:去除sourcemap

cache-loader, // 將loader處理結果快取下來

公升級node,

公升級webpack,

Webpack 打包優化之速度篇

在前文 webpack 打包優化之體積篇中,對如何減小webpack打包體積,做了些 當然,那些法子對於打包速度的提公升,也是大有裨益。然而,打包速度之於開發體驗和及時構建,相當重要 所以有必要對其做更為深入的研究,以便完善工作流,這就是本文存在的緣由。在使用實際專案開發中,為了提公升開發效率,很明...

提高webpack打包速度

隨時公升級webpack及其相關管理工具的版本,包括npm,node,yarn等。每個版本都會有優化,同時webpack建立在node環境之上,node的公升級也會有一定的效率提公升 同樣安裝較新的npm和yarn工具,可以提高相互依賴的模組間的解析速度 loader的解析和處理較為耗時的,有可能的...

webpack打包優化

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