webpack4打包优化配置

1、对图片进行压缩和优化

image-webpack-loader可以帮助我们对图片进行压缩和优化

cnpm install image-webpack- --save-dev
复制代码

 {
      test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
      use: [
        'file-loader',
       {
         loader: 'image-webpack-loader',
         options: {
           mozjpeg: {
             progressive: true,
             quality: 65
           },
           optipng: {
             enabled: false,
           },
           pngquant: {
             quality: '65-90',
             speed: 4
           },
           gifsicle: {
             interlaced: false,
           },
           webp: {
             quality: 75
           }
         }
       },
      ]
    }
复制代码

2、区分环境变量

日常的前端开发工作中，一般都会有两套构建环境
一套开发时使用，构建结果用于本地开发调试，不进行代码压缩，打印 debug 信息，包含 sourcemap 文件
一套构建后的结果是直接应用于线上的，即代码都是压缩后，运行时不打印 debug 信息，静态文件不包括 sourcemap
webpack 4.x 版本引入了 mode 的概念
指定使用 production mode 时，默认会启用各种性能优化的功能，包括构建结果优化以及 webpack 运行性能优化
指定使用 development mode 的话，则会开启 debug 工具，运行时打印详细的错误信息，以及更加快速的增量编译构建

2.2、获取mode参数

optimize-css-assets-webpack-plugin 用于优化或者压缩CSS资源

cnpm install image-webpack- --save-dev
复制代码

const UglifyJSPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports=(env,argv) => ({
    optimization: {
        minimizer: argv.mode == 'production'?[            
            new UglifyJSplugin({
                  cache: true,//启用缓存
                  parallel: true,// 使用多进程运行改进编译速度
                  sourceMap:true//生成sourceMap映射文件
            }),
            new OptimizeCssAssetsWebpackPlugin({})
        ]:[]
    }
})
复制代码

3、拆分webpack配置

可以把 webpack 的配置按照不同的环境拆分成多个文件，运行时直接根据环境变量加载对应的配置即可

webpack.base.js：基础部分，即多个文件*享的配置
webpack.development.js：开发环境使用的配置
webpack.production.js：生产环境使用的配置
webpack.test.js：测试环境使用的配置
使用webpack-merge 合并环境配置

const { smart } = require('webpack-merge')
const webpack = require('webpack')
const base = require('./webpack.base.js')
module.exports = smart(base, {
  module: {
    rules: [],
  }
})
复制代码

4、设置忽略打包模块

IgnorePlugin用于忽略某些特定的模块，让 webpack 不把这些指定的模块打包进去

import 'vue-scroll from  'vue-scroll';
new webpack.IgnorePlugin(/^\.\/locale/,/vue-scroll/)

复制代码

5、设置无需解析文件

noParse 字段，可以用于配置哪些模块文件的内容不需要进行解析，不需要解析依赖（即无依赖）的第三方大型类库等，可以通过这个字段来配置，以提高整体的构建速度

module.exports = {
// ...
module: {
  noParse: /jquery|lodash/, // 正则表达式
  // 或者使用函数
  noParse(content) {
    return /jquery|lodash/.test(content)
  },
}
}...
复制代码

6、resolve解析

6.1extensions

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

resolve: {
  extensions: [".js",".vue",".json",".css"]
},
复制代码

6.2 alias

配置别名可以加快webpack查找模块的速度

每当引入lodash 模块的时候，它会直接引入lodash,而不需要从node_modules文件夹中按模块的查找规则查找

resolve: {
   alias:{
    "lodash":path.resolve(__dirname,'node_modules/lodash');
   }
},
复制代码

6.2 modules

对于直接声明依赖名的模块（如 vue ），webpack 会类似 Node.js 一样进行路径搜索，搜索node_modules目录
这个目录就是使用resolve.modules字段进行配置的默认配置

resolve: {
    modules: ['node_modules'],
}
复制代码

6.2 mainFiles

当目录下没有 package.json 文件时，我们说会默认使用目录下的 index.js 这个文件，其实这个也是可以配置的

resolve: {
  mainFiles: ['index'], // 你可以添加其他默认使用的文件名
}
复制代码

7、打包第三方类库

平时使用工具函数时，会直接引用过来例如：

import _ from 'lodash';
console.log(_.join([1, 2, 3],','));
复制代码

利用webpack.ProvidePlugin lodash 函数会自动添加到当前模块的上下文，无需显示声明

  new webpack.ProvidePlugin({
      _:'lodash'
  })
复制代码

8、DLL

dll为后缀的文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据

把基础模块独立出来打包到单独的动态连接库里
当需要导入的模块在动态连接库里的时候，模块不能再次被打包，而是去动态连接库里获取
DllPlugin插件：用于打包出一个个动态连接库
DllReferencePlugin: 在配置文件中引入DllPlugin插件打包好的动态连接库

const path=require('path');
const DllPlugin=require('webpack/lib/DllPlugin');
module.exports={
    entry: {
        vue:['vue','vue-router']
    },// 把 vue, vue-router 相关模块的放到一个单独的动态链接库
    output: {
        path: path.resolve(__dirname,'dist/dll'),// 输出的文件都放到 dist/dll 目录下
        filename: '[name].dll.js',//输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称
        library: '_dll_[name]',//存放动态链接库的全局变量名称,例如对应 vue 来说就是 _dll_vue
    },
    plugins: [
        new DllPlugin({
            context: __dirname,
            // 动态链接库的全局变量名称，需要和 output.library 中保持一致
            // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
            // 例如 vue.manifest.json 中就有 "name": "_dll_vue"
            name: '_dll_[name]',
            // 描述动态链接库的 manifest.json 文件输出时的文件名称
            path: path.join(__dirname, 'dist/dll', '[name].manifest.json')
        })
    ]
}
复制代码

9、HappyPack

Node.js 之上的 Webpack 是单线程模型
构建需要解析和处理文件,文件读写和计算密集型的操作太多后速度会很慢
happypack 就能让Webpack把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

npm i happypack --save-dev
复制代码

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
        })
复制代码

10、打包模块输出分析

通过使用webpack-bundle-analyzer可以看到项目各模块的大小，可以按需优化

安装

cnpm i webpack-bundle-analyzer --save-dev
复制代码

配置webpack

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
  new BundleAnalyzerPlugin(
           {
              analyzerMode: 'server',
              analyzerHost: '127.0.0.1',
              analyzerPort: 8889,
              reportFilename: 'report.html',
              defaultSizes: 'parsed',
              openAnalyzer: true,
              generateStatsFile: false,
              statsFilename: 'stats.json',
              statsOptions: null,
              logLevel: 'info'
            }
       ),
]
复制代码

配置package.json

"analyz": "NODE_ENV=production npm_config_report=true npm run build"
复制代码

分析结果

webpack --profile --json > stats.json

复制代码

1、对图片进行压缩和优化

2、区分环境变量

2.2、获取mode参数

3、拆分webpack配置

4、设置忽略打包模块

5、设置无需解析文件

6、resolve解析

6.1extensions

6.2 alias

6.2 modules

6.2 mainFiles

7、打包第三方类库

8、DLL

9、HappyPack

10、打包模块输出分析

安装

配置webpack

配置package.json

分析结果

Nginx基本配置、性能优化指南

Windows环境配置jenkins打包Android项目和vue项目

Mysql5.5数据库的MyISAM和InnoDB引擎配置优化

详解MySQL配置的优化

Linux系统配置（系统优化）

Jenkins配置maven项目之打包、部署、发布的全过程

[优化性能]求高手精简curl的使用配置,该怎么解决

浅谈mysql配置优化和sql语句优化

pyinstaller打包后,配置文件无法正常读取的解决

详解多页应用 Webpack4 配置优化与踩坑记录