webpack开发环境速度优化

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

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)

  })

}

巴特西