Webpack打包优化

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 文件

使用 extract-text-webpack-plugin 插件将css文件分离出来。为了使项目加载时候今早加载css样式

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> 配置
         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
                       }
                 }
          })
       },
     } ]
复制代码

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
           ],
复制代码