優化

1：優化圖片

使用 url-loader 優化， 將小圖片轉化成base64壓縮,防止小圖片太多請求次數太多。

1：下載 url-loader
     npm install -D url-loader
2: 配置
   在 webpack.prod.conf.js 文件夾中配置
     module: {
      rules: [{
         test: /\.(png|svg|jpg|gif)$/,
         use: [{
           loader: 'url-loader', // 優化小圖片過多造成請求數太多
           options: {
             limit: 8192, // 如果圖片小于 8192 bytes 就直接 base64 內置到模板，否則才拷貝
             outputPath: 'img/'
           } 
         }]
      },
 

2：分離第三方包

打包后的bundle.js文件夾較大，所以每次加載的時候，請求比較慢，所以有必要在打包時將第三方包分離出來。使用CommonsChunkPlugin 插件進行配置。

在 webpack.prod.conf.js 文件夾中配置
 1：引入webpack
     const webpack = require('webpack')
2：將 entry  改成一個對象
       entry: {
         vendor: ['babel-polyfill', "axios", "marked", "react", "react-dom", "react-router-dom"], // 第三方文件
         app: './src/main.js'
       },
       plugins: [
         new webpack.optimize.CommonsChunkPlugin({
           name: "vendor", // 當加載 vendor 中的資源的時候，把這些資源都合并到 vendor.js 文件中
           filename: "js/vendor.js",
           minChunks: Infinity,
        })
      ],

3：分離 css 文件并壓縮 css 文件

使用 extract-text-webpack-plugin 插件將css文件分離出來。為了使項目加載時候盡早優先加載css樣式，也為了解決js文件體積過大的問題

1: 下載 extract-text-webpack-plugin
     npm  install  -D  extract-text-webpack-plugin
2: 配置
   在 webpack.prod.conf.js 文件夾中配置
    1> 引入 
         const ExtractTextPlugin = require("extract-text-webpack-plugin")
    2> 配置分離 css 文件
         plugins: [
               new ExtractTextPlugin("css/styles.css"), // 把抽離出來的 css 文件打包到 styles.css 文件中
         ],
        module: {
         rules: [ {
           test: /\.css$/,
           use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: {
                        loader: 'css-loader',
                       options: {
                            minimize: true
                       }
                 }
          })
       },
     } ]
  3> 配置壓縮css (直接配置 css-loader 屬性的選項)
 module: {
    rules: [
          {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
               //這個地方配置一個對象，添加一個屬性進行壓縮css文件
               use: {
                   loader: 'css-loader',
                  options: {
                    minimize: true   // 配置minimize 值為true，壓縮css 文件
                  }
              }
           })
      },

4: 壓縮 js 文件

使用 uglifyjs-webpack-plugin 將js壓縮，減少打包后的 vendor.js , bundle.js 等js的文件大小

   1: 下載 uglifyjs-webpack-plugin
         npm install -D uglifyjs-webpack-plugin
    2: 配置
        在webpack.prod.conf.js 文件夾中配置
        1> 引入
           const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
        2> 配置
           plugins: [
                new UglifyJsPlugin(), // 壓縮 JavaScript
           ],

5：壓縮Html

為了減少打包后的文件體積，使性能更好，效率更高，提高加載速度，打包時有必要進行壓縮。

使用html-webpack-plugin 進行壓縮

1：下載 html-webpack-plugin
     npm   install  -D   html-webpack-plugin
2:   配置
     在  webpack.prod.conf.js  文件中配置
     1>  引入
       const HtmlWebpackPlugin = require('html-webpack-plugin')
     2> 配置
       plugins: [
             new HtmlWebpackPlugin({
               template: './index.html', // 把 index.html 也打包到 dist 目錄中
             // 壓縮 html，默認 false 不壓縮
              minify: {
                  collapseWhitespace: true, // 去除回車換行符以及多余空格
                 removeComments: true, // 刪除注釋
             }
         }),]

minify 是一個對象，其實還可以配置壓縮其它。感興趣的小伙伴可以去官網研究下

??? ??? 以上就是我做項目的時候使用的打包優化的方法，分享給小伙伴們，如果對你有幫助，給我加個關注，點個贊喲，?( ′???` )比心