webpack优化

1.配置resolve提高文件查找效率

resolve:{
      extensions: ['.wasm', '.mjs', '.js', '.json'], //引入模块时可以不加扩展名
      alias:{
        '@': path.resolve('src'),
        'test1':path.resolve('src/page/pageView/test.js'),
      }
    },

2.不解析的模块

module:{
        noParse:/jquery/, //不去解析jquery
        rules:[
            //...
        ]
    },

3.dell-plugin将一些不做修改的依赖文件，提前打包。这样我们开发代码发布的时候就不需要再对这部分代码进行打包。从而节省了打包时间。

DllPlugin插件： 用于打包出一个个动态连接库
DllReferencePlugin: 在配置文件中引入DllPlugin插件打包好的动态连接库
创建一个webpack.dll.config.js文件

var path = require("path");
var webpack = require("webpack");

module.exports = {
  // 要打包的模块的数组
  entry: {
    vendor: ['vue/dist/vue.esm.js','vue-router']
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
    filename: '[name].dll.js',// vendor.dll.js中暴露出的全局变量名。
    library: '[name]_library' // 与webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library', 
      context: __dirname
    }),
  ]
};

在package.json的scripts里加上：

"dll": "webpack --config build/webpack.dll.config.js",

运行npm run dll 在static/js下生成vendor-manifest.json;
在build/webpack.base.conf.js里加上：

// 添加DllReferencePlugin插件
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    })
  ],

然后在index.html中引入vendor.dll.js：

<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>

4.提取公共css和js

5.去除未使用的css和js

webpack --display-used-exports --optimize-minimiz

6.* happypack 就能让Webpack把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

npm i happypack@next -D

const HappyPack = require('happypack');
    rules: [
    {
        test: /\.js$/,
        // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
        use: ['happypack/loader?id=babel'],
        exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
        test: /\.css$/,
        // 把对 .css 文件的处理转交给 id 为 css 的 HappyPack 实例
        use: ['happypack/loader?id=css']
    }
]


new Happypack({
            //ID是标识符的意思，ID用来代理当前的happypack是用来处理一类特定的文件的
            id: 'js',
            use: [{
                loader: 'babel-loader',
                //options=query都是向插件传递参数的
                options: {
                    presets: [["@babel/preset-env", { modules: false }], "@babel/preset-react"],
                    plugins: [
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-proposal-class-properties", { "loose": true }],
                    ]
                }
            }]
        }),
        new Happypack({
            //ID是标识符的意思，ID用来代理当前的happypack是用来处理一类特定的文件的
            id: 'css',
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
            threads: 4,//你要开启多少个子进程去处理这一类型的文件
            verbose: true//是否要输出详细的日志 verbose
        })

7.css和js压缩,webpack-parallel-uglify-plugin 插件可以使用多继承来压缩js

npm i -D webpack-parallel-uglify-plugin

// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
  plugins: [
    // 使用 ParallelUglifyPlugin 并行压缩输出JS代码
    new ParallelUglifyPlugin({
      // 传递给 UglifyJS的参数如下：
      uglifyJS: {
        output: {
          /*
           是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
           可以设置为false
          */
          beautify: false,
          /*
           是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
          */
          comments: false
        },
        compress: {
          /*
           是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
           不大的警告
          */
          warnings: false,

          /*
           是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
          */
          drop_console: true,

          /*
           是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
           转换，为了达到更好的压缩效果，可以设置为false
          */
          collapse_vars: true,

          /*
           是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成
           var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
          */
          reduce_vars: true
        }
      }
    }),
  ]
}

根据开发环境和生产环境配置不同的webpack.config.js ，基础配置文件（webpack.base.config.js）,开发环境配置文件（webpack.dev.config.js）,基础配置文件（webpack.prod.config.js），如然后使用（webpack.config.js）作为唯一入口文件根据环境变量来识别环境

webpack.config.js配置如下：

npm i webpack-merge -D
npm i cross-env -D

const path=require('path'); // 导入path模块
const webpack=require('webpack'); // 导入webpack模块
const base=require('/webpack.base.config.js'); // 导入基础配置模块
const merge = require('webpack-merge') // 合拼配置文件
const NODE_ENV = process.env.NODE_ENV; //获取package.json环境变量
const other
if(NODE_ENV == 'development'){
  other=require('/webpack.dev.config.js'); // 导入基础配置模块
} else{
  other=require('/webpack.prod.config.js'); // 导入基础配置模块
}
module.exports=merge(base,other)

package.json文件修改如下:

"build-production": "cross-env NODE_ENV=production && webpack --mode development",
 "build-development": "cross-env NODE_ENV=development && webpack --mode development",

8.接入CDN

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]_[hash:8].js',
        publicPath: 'http://img.test.cn'
    },