zoukankan      html  css  js  c++  java
  • 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)
      })
    }
  • 相关阅读:
    内置对象 和 DropDownList时间年月日的三级联动
    复合控件 ispostback 跨页面传值
    webform简单控件和Repeater的使用
    初步认识ASP.NET WebForm
    WinForm Timer控件,三级联动[省,市,区]
    进程 线程 用户控件
    窗体容器MDI
    对话框控件 MessageBox.Show()用法补充 打开新窗体的3中模式
    winform窗体移动和阴影API
    PS学习笔记
  • 原文地址:https://www.cnblogs.com/lyraLee/p/12040335.html
Copyright © 2011-2022 走看看