Webpack Bundle Analyzer插件的使用

VishKozus 發布于2019-08-23 14:26 / 2630人閱讀

摘要：一原理讀取輸出文件夾通常是中的文件，把該文件可視化展現的插件。便于直觀地比較各個文件的大小，以達到優化性能的目的。命令行中鍵入命令瀏覽器自動打開分析頁面

一、原理

讀取輸出文件夾（通常是dist）中的stats.json文件，把該文件可視化展現的插件。便于直觀地比較各個bundle文件的大小，以達到優化性能的目的。

二、安裝

> npm install webpack-bundle-analyzer --save-dev

三、作為webpack插件使用 1、引入

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

2、使用

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
...
}))

四、2種方式 1、每次構建時自動打開

構建完成之后，瀏覽器會自動打開localhost:8888,不用改動package.json

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: "server",
    generateStatsFile: true,
    statsOptions: { source: false }
}))

配置參數記得補上，不然構建完不會自動打開～

2、運行特定命令才打開

（1）把analyzerMode設置為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，具體情況根據實際情況來定。

（3）命令行中鍵入命令
npm run bundle-report

瀏覽器自動打開分析頁面:localhost:8123

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100610.html

webpack4使用筆記之plugin

摘要：默認為根據自己的指定的模板文件來生成特定的文件主要是針對多入口文件。那么選項就可以決定是否都使用這些生成的文件。壓縮壓縮通過使用可以看到項目各模塊的大小，可以按需優化圖片來自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...

ymyang 2019-08-23 14:57 評論0 收藏0
webpack4 SplitChunks實現代碼分隔詳解

摘要：代碼均放在倉庫給我們帶來了一些改變。插件以前使用允許我們將公共依賴項提取到現有的或全新的代碼塊中。代碼詳情見文章開頭倉庫。這才是配置的關鍵緩存組會繼承的配置，但是和只能用于配置緩存組。可以通過禁用緩存組。代碼均放在git倉庫 Webpack 4給我們帶來了一些改變。包括更快的打包速度，引入了SplitChunksPlugin插件來取代（之前版本里的）CommonsChunksPlugin插件...

Zachary 2019-05-23 17:29 評論0 收藏0
vue-cli項目優化，縮短首屏加載時間

摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設置，項目首屏加載時會加載整個網站所有的文件，所以將文件拆開，點擊某個頁面時再加載該頁面的是一個很好的優化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。主要是首屏加載太慢。大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。 ...

lufficc 2019-08-29 16:24 評論0 收藏0
vue-cli項目優化，縮短首屏加載時間

摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設置，項目首屏加載時會加載整個網站所有的文件，所以將文件拆開，點擊某個頁面時再加載該頁面的是一個很好的優化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。主要是首屏加載太慢。大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。 ...

hedzr 2019-08-26 12:11 評論0 收藏0