|
在講解性能優(yōu)化的方案之前,，我們需要了解一下webpack的整個(gè)工作流程,， 方案一：減少模塊解析也就是省略了構(gòu)建chunk依賴模塊的這幾個(gè)步驟 如果沒有l(wèi)oader對該模塊進(jìn)行處理，該模塊的源碼就是最終打包結(jié)果的代碼,。不對某個(gè)模塊進(jìn)行解析,，可以縮短構(gòu)建時(shí)間 哪些模塊不需要解析？模塊中無其他依賴 webpack配置 配置module.noParse,，它是一個(gè)正則,，被正則匹配到的模塊不會(huì)解析 module.exports = { mode: "development", module: { noParse: /test/ } } 方案二：優(yōu)化loader1.對于某些庫，不使用loader例如：babel-loader可以轉(zhuǎn)換ES6或更高版本的語法,，可是有些庫本身就是用ES5語法書寫的,，不需要轉(zhuǎn)換，使用babel-loader反而會(huì)浪費(fèi)構(gòu)建時(shí)間 通過module.rule.exclude或module.rule.include,，排除或僅包含需要應(yīng)用loader的場景,，可以直接排除掉node_modules的所有包，也可以僅排除單獨(dú)的包 module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/,// exclude: /lodash/ //或 // include: /src/, use: "babel-loader" } ] } } 2.利用cache-loader對模塊進(jìn)行緩存如果某個(gè)文件內(nèi)容不變,，經(jīng)過相同的loader解析后,，解析后的結(jié)果也不變，所以可以將loader的解析結(jié)果保存下來,，讓后續(xù)的解析直接使用保存的結(jié)果 module.exports = { module: { rules: [ { test: /\.js$/, use: ['cache-loader', 'babel-loader'] }, ], }, }; 大家可能會(huì)感到疑惑,，明明loader是從后往前執(zhí)行的，那么cache-loader是怎么拿到babel-loader的結(jié)果的呢,？ 其實(shí),，每個(gè)loader上，還有一個(gè)pitch的靜態(tài)方法 function loader(source){ return `new source` } loader.pitch = function(filePath){ // 可返回可不返回 // 如果返回,，返回源代碼 } module.exports = loader; loader真正執(zhí)行的順序是這樣的： loader1.pitch => loader2.pitch => loader3.pitch => loader3 => loader2 => loader1 因此,，以['cache-loader', 'babel-loader']為例， 第一次打包： 先調(diào)用cache-loader.pitch,，發(fā)現(xiàn)無緩存,，往后執(zhí)行， 調(diào)用babel-loader.pitch,，也發(fā)現(xiàn)無緩存,，往后執(zhí)行， 讀取當(dāng)前需要處理的模塊的代碼 調(diào)用babel-loader,，返回修改成es5的代碼 調(diào)用cache-loader,，返回babel-loader處理的結(jié)果代碼并緩存
第二次打包： 先調(diào)用cache-loader.pitch，發(fā)現(xiàn)有緩存,，則返回源代碼 直接返回上次處理好的源代碼,，不會(huì)繼續(xù)往后走了
當(dāng)然對于babel-loader,，使用它本身的配置也是可以緩存的 module.exports = { module: { rules: [ { test: /\.js$/, use: 'babel-loader?cacheDirectory' }, ], }, }; 3.開啟thread-loader它會(huì)把后續(xù)的loader放到線程池的線程中運(yùn)行，以提高構(gòu)建效率 由于后續(xù)的loader會(huì)放到新的線程中,，所以,，后續(xù)的loader不能： 使用 webpack api 生成文件 （loader上下文中的emitFile、emitError等api） 無法使用自定義的 plugin api (某些插件提供了自身的plugin和loader,，plugin會(huì)向webpack注入新的api,，loader中會(huì)使用） 無法訪問 webpack的配置
注意，開啟和管理線程需要消耗時(shí)間,，在小型項(xiàng)目中使用thread-loader反而會(huì)增加構(gòu)建時(shí)間 方案三：熱替換熱替換并不能降低構(gòu)建時(shí)間（可能還會(huì)稍微增加），但可以減少代碼改動(dòng)到效果呈現(xiàn)的時(shí)間 // webpack配置 module.exports = { devServer:{ hot:true // 開啟HMR } } // index.js if(module.hot){ // 是否開啟了熱更新 module.hot.accept() // 接受熱更新 } 方案四：動(dòng)態(tài)鏈接庫什么情況下使用,？ 當(dāng)打包出來的多個(gè)bundle.js文件都有重復(fù)的第三方代碼,，會(huì)增加文件的體積，不利于傳輸 打包的過程：1.使用output.library配置公共模塊的全局變量名// webpack.dll.config.js module.exports = { mode: "production", entry: { jquery: ["jquery"], lodash: ["lodash"] }, output: { filename: "dll/[name].js", library: "[name]"// 每個(gè)buldle暴露的全局變量名 } }; 打包結(jié)果 2.用DllPlugin創(chuàng)建資源清單（包含信息：全局變量名,、node_modules對應(yīng)包的路徑）// webpack.dll.config.js module.exports = { plugins: [ new webpack.DllPlugin({ path: path.resolve(__dirname, "dll", "[name].manifest.json"), //資源清單的保存位置 name: "[name]"//資源清單中,，暴露的變量名 }) ] }; 打包生成的資源清單 // dll/lodash.manifest.json { "name": "lodash", "content": { "./node_modules/lodash/lodash.js": { xxx } } } // dll/jquery.manifest.json { "name": "jquery", "content": { "./node_modules/jquery/dist/jquery.js": { xxx } } } 3.用DllReferencePlugin使用資源清單在頁面中手動(dòng)引入公共模塊 重新設(shè)置clean-webpack-plugin 如果使用了插件clean-webpack-plugin，為了避免它把公共模塊清除,，需要做出以下配置,，webpack.config.js配置（注意不是和output.library、DllPlugin在同一個(gè)配置文件中哦）: new CleanWebpackPlugin({ // 要清除的文件或目錄 // 排除掉dll目錄本身和它里面的文件 cleanOnceBeforeBuildPatterns: ["**/*", '!dll', '!dll/*'] }) 使用DllReferencePlugin 找到對應(yīng)的資源清單,，根據(jù)暴露的變量名(output.library)匹配第三方庫在node_modules中的路徑,，不需要將代碼打包到bundle.js中，webpack.config.js: new webpack.DllReferencePlugin({ manifest: require("./dll/jquery.manifest.json") }), new webpack.DllReferencePlugin({ manifest: require("./dll/lodash.manifest.json") }) 打包過程：首先要根據(jù)webpack.dll.config.js配置文件打包一次,，之后再根據(jù)webpack.config.js打包 最終打包結(jié)果的格式： (function(modules){ //... })({ // index.js文件的打包結(jié)果并沒有變化 "./src/index.js": function(module, exports, __webpack_require__){ var $ = __webpack_require__("./node_modules/jquery/index.js") var _ = __webpack_require__("./node_modules/lodash/index.js") _.isArray($(".red")); }, // 由于資源清單中存在,，jquery的代碼并不會(huì)出現(xiàn)在這里 "./node_modules/jquery/index.js": function(module, exports, __webpack_require__){ module.exports = jquery; }, // 由于資源清單中存在，lodash的代碼并不會(huì)出現(xiàn)在這里 "./node_modules/lodash/index.js": function(module, exports, __webpack_require__){ module.exports = lodash; } }) 優(yōu)點(diǎn)： 極大提升自身模塊的打包速度 極大的縮小了自身文件體積 有利于瀏覽器緩存第三方庫的公共代碼
缺點(diǎn)： 方案五：抽離公共代碼有多個(gè)模塊都引用了公共模塊,，當(dāng)一個(gè)模塊加載時(shí)，訪問了公共模塊,，并緩存下來,，另一個(gè)模塊加載就可以直接使用緩存的結(jié)果。 module.exports = { optimization: { splitChunks: { // 分包策略 chunks: "all", cacheGroups: { // 公共模塊 common: { mixSize: 0, minChunks: 2, // 至少被幾個(gè)文件引用 }, vendors: { test: /[\\/]node_modules[\\/]/, // 當(dāng)匹配到相應(yīng)模塊時(shí),，將這些模塊進(jìn)行單獨(dú)打包 priority: 1 // 緩存組優(yōu)先級,，優(yōu)先級越高，該策略越先進(jìn)行處理,，默認(rèn)值為0 }, } } } } 還可以抽離公共樣式,，使用MiniCssExtractPlugin module.exports = { optimization: { splitChunks: { chunks: "all", cacheGroups: { styles: { test: /\.css$/, // 匹配樣式模塊 minSize: 0, // 覆蓋默認(rèn)的最小尺寸，這里僅僅是作為測試 minChunks: 2 // 覆蓋默認(rèn)的最小chunk引用數(shù) } } } }, module: { rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] }] }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: "[name].[hash:5].css", // chunkFilename是配置來自于分割chunk的文件名 chunkFilename: "common.[hash:5].css" }) ] } 通過cdn方式引入js,、css文件,，將不怎么需要更新的第三方庫脫離webpack打包，不被打入bundle中，從而減少打包時(shí)間,，但又不影響運(yùn)用第三方庫的方式,，例如import方式等。 const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin'); module.exports = { plugins: [ new HtmlWebpackExternalsPlugin({ externals: [{ module: 'vue', entry: 'https://img./oss/d/file/2021-08-29/20e4955697901f0c3e824ad199ce44fe.js', global: 'Vue' }] }) ], } 最后看到在dist/index.html中動(dòng)態(tài)添加了如下代碼： 方案六：代碼壓縮壓縮js和css代碼： const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { optimization: { // 是否要啟用壓縮,，默認(rèn)情況下,，生產(chǎn)環(huán)境會(huì)自動(dòng)開啟 minimize: true, minimizer: [ // 壓縮時(shí)使用的插件 // 壓縮js文件 new TerserPlugin({
parallel: true // 開啟多線程壓縮
}), // 壓縮css文件 new OptimizeCSSAssetsPlugin() ], }, }; 使用compression-webpack-plugin插件對打包結(jié)果進(jìn)行預(yù)壓縮，可以移除服務(wù)器的壓縮時(shí)間 new CmpressionWebpackPlugin({ test: /\.js/, minRatio: 0.5 }) https://www./qianduankaifa/127029.html
|
