淺談webpack打包之後的檔案過大的解決方案，淺談webpack

淺談webpack打包之後的檔案過大的解決方案，淺談webpack

以前一直使用 create-react-app 這個腳手架進行 react 開發，後面因為一些自訂的配置，轉而使用 webpack 搭建一套自己的腳手架。但是在使用 webpack 打包之後發現，納尼？怎麼檔案這麼大？？？ 於是研究了一下如何處理 webpack 打包之後檔案太大的情況，簡單記錄下來。

首先配置全域變數

首先，通過指定環境，告訴 webpack 我們當前處於 production 環境中，要按照 production 的方式去打包。

//指定環境，將process.env.NODE_ENV環境與library關聯 new Webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production'), }),

最佳化 devtool 中的 source-map .

dev-tool 提供了很多種選項，用來增強我們 debug 的能力，我們熟知的有： source-map , inline-source-map , cheap-source-map 等等。詳細的用法可以參考Devtool官方文檔，Devtool配置對比 ， webpack sourcemap 選項多種模式的一些解釋 ， https://webpack.github.io/docs/configuration.html#devtool 如果你的檔案在打包之後突然變成好幾M，那麼不用想，肯定是因為 source-map 的原因。 source-map 在開發階段確實很好用，調試起來很方便，但是在生產環境下就沒必要部署了。 建議在 prod 環境下關閉 source-map 。

剝離css檔案，單獨打包

安裝 webpack 外掛程式 extract-text-webpack-plugin 。 npm install extract-text-webpack-plugin --save-dev 。 使用方法：

plugins:[ new ExtractTextPlugin('static/css/styles.[contenthash].css'),]

這裡使用了 contenthash ， webpack 會根據內容去產生 hash 值。

使用 UglifyJSPlugin 壓縮。

通過 UglifyJSPlugin 可以壓縮我們的 *.js 檔案。 安裝方法: npm install uglifyjs-webpack-plugin --save-dev 。 用法： UglifyJSPlugin詳細用法

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')module.exports = { plugins: [   new UglifyJSPlugin({      parallel: 4,      uglifyOptions: {        output: {          comments: false,          beautify: false,        },        compress: {          warnings: false        },      },      cache: true,    }), ]}

提取公用依賴

使用 CommonsChunkPlugin 外掛程式，將多個 js 檔案進行提取，建立一個獨立的檔案。這個檔案包含一些共用模組，瀏這樣覽器只在剛開始的時候載入一次，便緩衝起來供後續使用。而不用每次訪問一個新介面時，再去載入一個更大的檔案。

entry:{ app:'./entry', vendor:['react','other-lib'], }, plugins:[ new Webpack.optimize.CommonsChunkPlugin({   name: 'vendor', }), ]

開啟gzip壓縮

我們使用 compression-webpack-plugin 外掛程式進行壓縮。 安裝： npm install compression-webpack-plugin --save-dev 。 compression-webpack-plugin 詳細用法 使用：

const CompressionPlugin = require("compression-webpack-plugin");plugins:[new CompressionPlugin({ asset: '[path].gz[query]', //目標資源名稱。[file] 會被替換成原資源。[path] 會被替換成原資源路徑，[query] 替換成原查詢字串   algorithm: 'gzip',//演算法   test: new RegExp(     '\\.(js|css)$'  //壓縮 js 與 css   ),   threshold: 10240,//只處理比這個值大的資源。按位元組計算   minRatio: 0.8//只有壓縮率比這個值小的資源才會被處理})]

壓縮結果：

開啟html壓縮，自動添加上面產生的靜態資源

添加外掛程式 html-webpack-plugin

安裝： npm install html-webpack-plugin --save-dev 用法：

plugins:[ new HtmlWebpackPlugin({   title: '',     template: __dirname + '/../public/index.html',     minify: {       removeComments: true,       collapseWhitespace: true,       removeRedundantAttributes: true,       useShortDoctype: true,       removeEmptyAttributes: true,       removeStyleLinkTypeAttributes: true,       keepClosingSlash: true,       minifyJS: true,       minifyCSS: true,       minifyURLs: true,     },     chunksSortMode:'dependency'   }),]

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。