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'
     }),
]
複製代碼