webpack开发环境速度优化

Posted 2021-03-23 开心的小程序员

随着项目的增大，项目运行速度会越来越慢，导致影响开发进度。需要提升开发时代码的运行速度。

1. ScopeHoisting作用域提升

该插件在production模式下默认开启。development下需要手动启动。

1 .使用条件

和TreeShaking一样，必须使用ES6的模块，使用import/export语法。

2. 优点：

1）节省内存开销。因为默认每个bundle会打成闭包。

2）减少体积，提升速度。因为如果不使用es模块，默认会包裹一层require。

3. 用法

1. 首先阻止babel将es6的模块进行转换

    {
        test: /.jsx?$/,
        use: {
          loader: ‘babel-loader‘,
          options: {
            // 切记modules: false
            presets: [[‘@babel/preset-env‘, {modules: false}], ‘@babel/preset-react‘],
            plugins: [
              [‘@babel/plugin-proposal-decorators‘, {legacy: true}],
              [‘@babel/plugin-proposal-class-properties‘, {loose: true}]
            ]
          },
        },
        exclude: /node_modules/
      }

2. 引入的第三方库尽量使用es版本

3. 在plugins中配置插件

  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
  ]

4. node_modules中的模块优先使用指向es模块的文件

  resolve: {
    mainFields: [‘jsnext:main‘, ‘browser‘, ‘main‘]
  },

2. 热更新

当项目特别大时，页面重新加载会非常缓慢，可以通过热更新，只更改修改的部分。

1. sevServer中开启热更新

module.exports = {
   ... 
   devServer: {
       hot: true   //默认开启webpack.HotModuleReplacementPlugin
   }
}

2. css样式热更新

开发模式下使用style-loader, 默认实现了HMR。（css-hot-loader在hot:true时有问题）

      {
        test: /.css$/,
        use: [
          ‘style-loader‘,
          ‘css-loader‘
        ]
      },

3. jsx代码热更新

使用react-hot-loader插件，在需要的模块包裹hot函数。

{
        test: /.jsx?$/,
        use: {
          loader: ‘babel-loader‘,
          options: {
            presets: [[‘@babel/preset-env‘, {modules: false}], ‘@babel/preset-react‘],
            plugins: [
              [‘@babel/plugin-proposal-decorators‘, {legacy: true}],
              [‘@babel/plugin-proposal-class-properties‘, {loose: true}],
              [‘react-hot-loader/babel‘]
            ]
          },
        },
        exclude: /node_modules/
      },

在代码中使用hot方法

import React from ‘react‘;
import { hot } from ‘react-hot-loader/root‘;

function Test(props) {
  return(
    <div className="hehe">ppp</div>
  )
}

export default process.env.NODE_ENV === ‘development‘ ? hot(Test) : Test;

也可以不使用该插件，自己实现逻辑

// 尽量在子组件实现该逻辑;它不接受css文件的变化
if(module.hot) {
  module.hot.accept([‘./example.js‘], () => {
    ReactDOM.render(<App/>, window.root)
  })
}