webpack性能优化

景先前端框架 2019-11-22 1242 0

babel-loader优化

开启缓存，开发环境常用

{
              test: /\.js$/,
              loader: ['babel-loader?cacheDirectory'],// 开启缓存
              include:path.resolve(__dirname,'src'),//明确范围
              // 排除范围 include和exclude两者选一个
              // exclude:path.resolve(__dirname,'node_modules'）

},

IgnorePlugin 和 noParse

IgnorePlugin直接不引入，代码中没有

noParse引入，但不打包，可用于生产环境

module:{
// 忽略对react.min.js文件的递归解析处理
  noParse:[/react\.min\.js$/]
}

happyPack 多进程打包

JS单线程，开启多进程打包
提高构建速度（特别是多核CPU）
可用于生产环境

const HappyPack = require('happypack')

module: {
        rules: [
            // js
            {
                test: /\.js$/,
                // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                use: ['happypack/loader?id=babel'],
                include: srcPath,
                // exclude: /node_modules/
            },
        ]
},
plugins: [
       // happyPack 开启多进程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 'babel',
            // 如何处理 .js 文件，用法和 Loader 配置中一样
            loaders: ['babel-loader?cacheDirectory']
        })
]

ParallelUglifyPlugin 多进程压缩JS

配置和happyPack差不多
必须用于生产环境

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

plugins: [
     // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS 的参数
            // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
            uglifyJS: {
                output: {
                    beautify: false, // 最紧凑的输出
                    comments: false, // 删除所有的注释
                },
                compress: {
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })
]

关于开启多进程？

项目较大，打包较慢，开启多进程能提高速度
项目较小，打包很快，开启多进程会降低速度（进程开销）

自动刷新

保存代码后整个页面会刷新一遍，速度较慢，状态丢失
只要引用 devServer ，会默认开启自动刷新，一般不用
不可用于生产环境

    watch: true, // 开启监听，默认为 false,
    watchOptions: {
        ignored: /node_modules/, // 忽略哪些
        // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
        // 默认为 300ms
        aggregateTimeout: 300,
        // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
        // 默认每隔1000毫秒询问一次
        poll: 1000
    }

热更新

新代码生效，网页不刷新，状态不丢失
不可用于生产环境

const path = require('path')
const srcPath = path.join(__dirname, '..', 'src')
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');


entry: {
        index: [
            'webpack-dev-server/client?http://localhost:8080/',
            'webpack/hot/dev-server',
            path.join(srcPath, 'index.js')
        ],
        other: path.join(srcPath, 'other.js')
 },
 plugins: [
     new HotModuleReplacementPlugin()
 ],

 devServer:{
     port:8080,
     progress: true,  // 显示打包的进度条
     contentBase: distPath,  // 根目录
     open: true,  // 自动打开浏览器
     compress: true,  // 启动 gzip 压缩
     hot:true,
     // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
            '/api': 'http://localhost:3000',

            // 将本地 /api2/xxx 代理到 localhost:3000/xxx
            '/api2': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api2': ''
                }
            }
        }
 }

// 增加，开启热更新之后的代码逻辑,监听范围内
if (module.hot) {
    module.hot.accept(['./xxx'], () => {
       //......
    })
}

DllPlugin 动态链接库插件

前端框架如vue,react 体积大构建慢
较稳定，不常升级版本
同一个版本只构建一次即可，不用每次都重新构建
不可用于生产环境

webpack已内置Dllplugin,打包dll文件


webpack.dll.js
const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')
const path = require('path')
const srcPath = path.join(__dirname, '..', 'src')

module.exports = {
  mode: 'development',
  // JS 执行入口文件
  entry: {
    // 把 React 相关模块的放到一个单独的动态链接库
    react: ['react', 'react-dom']
  },
  output: {
    // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
    // 也就是 entry 中配置的 react 和 polyfill
    filename: '[name].dll.js',
    // 输出的文件都放到 dist 目录下
    path: distPath,
    // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
    // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
    library: '_dll_[name]',
  },
  plugins: [
    // 接入 DllPlugin
    new DllPlugin({
      // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
      // 例如 react.manifest.json 中就有 "name": "_dll_react"
      name: '_dll_[name]',
      // 描述动态链接库的 manifest.json 文件输出时的文件名称
      path: path.join(distPath, '[name].manifest.json'),
    }),
  ],
}