資訊專欄INFORMATION COLUMN
摘要：一原理讀取輸出文件夾通常是中的文件，把該文件可視化展現(xiàn)的插件。便于直觀地比較各個文件的大小，以達(dá)到優(yōu)化性能的目的。命令行中鍵入命令瀏覽器自動打開分析頁面
一、原理
讀取輸出文件夾（通常是dist）中的stats.json文件，把該文件可視化展現(xiàn)的插件。便于直觀地比較各個bundle文件的大小，以達(dá)到優(yōu)化性能的目的。
二、安裝> npm install webpack-bundle-analyzer --save-dev
三、作為webpack插件使用 1、引入const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
2、使用webpackConfig.plugins.push(new BundleAnalyzerPlugin({
...
}))
四、2種方式
1、每次構(gòu)建時自動打開
構(gòu)建完成之后，瀏覽器會自動打開localhost:8888,不用改動package.json
webpackConfig.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: "server",
generateStatsFile: true,
statsOptions: { source: false }
}))
配置參數(shù)記得補(bǔ)上，不然構(gòu)建完不會自動打開～
2、運(yùn)行特定命令才打開（1）把analyzerMode設(shè)置為disabled
webpackConfig.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: "disabled",
generateStatsFile: true,
statsOptions: { source: false }
}))
（2）在package.json的scripts字段中加入
"bundle-report": "webpack-bundle-analyzer --port 8123 dist/stats.json"
其中stat.json文件的位置在打包后的文件夾中，通常是dist，具體情況根據(jù)實(shí)際情況來定。
（3）命令行中鍵入命令
npm run bundle-report
瀏覽器自動打開分析頁面:localhost:8123
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100610.html
摘要：默認(rèn)為根據(jù)自己的指定的模板文件來生成特定的文件主要是針對多入口文件。那么選項就可以決定是否都使用這些生成的文件。壓縮壓縮通過使用可以看到項目各模塊的大小，可以按需優(yōu)化圖片來自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...
摘要：代碼均放在倉庫給我們帶來了一些改變。插件以前使用允許我們將公共依賴項提取到現(xiàn)有的或全新的代碼塊中。代碼詳情見文章開頭倉庫。這才是配置的關(guān)鍵緩存組會繼承的配置，但是和只能用于配置緩存組?？梢酝ㄟ^禁用緩存組。代碼均放在git倉庫 Webpack 4給我們帶來了一些改變。包括更快的打包速度，引入了SplitChunksPlugin插件來取代（之前版本里的）CommonsChunksPlugin插件...
摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設(shè)置，項目首屏加載時會加載整個網(wǎng)站所有的文件，所以將文件拆開，點(diǎn)擊某個頁面時再加載該頁面的是一個很好的優(yōu)化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。 主要是首屏加載太慢。 大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。 ...
摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設(shè)置，項目首屏加載時會加載整個網(wǎng)站所有的文件，所以將文件拆開，點(diǎn)擊某個頁面時再加載該頁面的是一個很好的優(yōu)化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。 主要是首屏加載太慢。 大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。 ...
閱讀 1987·2021-11-23 10:03
閱讀 4193·2021-11-22 09:34
閱讀 2495·2021-10-08 10:05
閱讀 2259·2019-08-30 15:53
閱讀 1698·2019-08-30 13:56
閱讀 1169·2019-08-29 16:52
閱讀 1118·2019-08-26 13:31
閱讀 3358·2019-08-26 11:45
