webpack打包优化点

技术分享 4年前 (2022-09-09) 0 999+

1. noParse

作用主要是过滤不需要解析的文件，比如打包的时候依赖了三方库（jquyer、lodash）等，而这些三方库里面没有其他依赖，可以通过配置noParse不去解析文件，提高打包效率。
是module中的一个属性，设置一个正则表达式，过滤多个库以|分割

module: {   noParse: '/jquery|lodash/',   // rules:[] }

2. 包含和排除目录

指定loader解析的规则，配置包含和排除目录一般两者写其一就行。

{   test: /.js$/,   use: {      loader: 'babel-loader',      options: {        presets: ['@babel/preset-env'], // 预设，转换js语法           "plugins": [               ["@babel/plugin-proposal-decorators", { "legacy": true }], // 解析类的装饰器               ["@babel/plugin-proposal-class-properties", { "loose": true }], // 解析类的属性               "@babel/plugin-transform-runtime", // 解析promise，Generator等新的API           ]        }    },   include: path.resolve(__dirname, 'src'),   exclude: /node_modules/ }

3. IgnorePlugin

该插件是webpack的内置插件，用于忽略某些特定的模块，不被webpack打包进去。

在实际开发项目时，moment库是非常常用的处理时间的库，虽然设置了语种为中文zh-cn，但是在打包的时候，还是会将所有语言都打包进去。就导致包很大，打包速度慢，locale 目录中存放的是多语种的语言包，不希望全部被打包进文件。此时就可以配置下IgnorePlugin

// src/index.js  import moment from 'moment'  // 忽略locale后，就必须手动单独引入需要的语言包 import 'moment/locale/zh-cn';  moment.locale('zh-cn');  //设置中文 let r = moment().endOf('day').fromNow(); console.log(r);

// webpack.config.js let Webpack = require('webpack'); module.exports = {     plugins:[         new Webpack.IgnorePlugin(/./locale/,/moment/), // locale 目录中存放的是多语种的语言包，不希望全部被打包进文件     ] }

4. happypack

多线程打包，多用于大型项目，因为在项目很小的时候，效果反而会慢，因为而分配线程，也会消耗时间。

npm install happypack

let HappyPack = require('happypack');  module.exports = {     // ...     module:{         rules:[             {                 test:/.js$/,                 use:'HappyPack/loader?id=js' //  id=js  代表打包js             },             {                 test:/.css$/,                 use:'HappyPack/loader?id=css' // id=css 代表打包css             }         ]     },     plugins:[         new HappyPack({              id:'css', // 打包css             use:['style-loader','css-loader']         }),         new HappyPack({              id:'js', // 打包js             use:[{ // 原本rules中 loader的配置即可                 loader:'babel-loader',                 options:{                     presets:['@babel/presets-env', '@babel/presets-react']                 }             }]         })     ] }