性能优化篇---Webpack构建代码质量压缩

•  Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码
•  Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件

提纲

•  本次优化构建代码质量基本技术：

1.  reactRouter按需加载；
2.  公共代码提取，以及代码压缩；
3.  CDN接入；
4.  开启gzip压缩；
5.  接入treeShaking，剔除无用代码
6.  开启Scope Hoisting

•  （生产环境代码构建）为实时查看每次配置后代码构建情况，使用Webpack监听文件避免每次手动build，并且开启webpack-jarvis，实时查看构建分析，npm i -D webpack-jarvis。
•  开启监听模式 

watch: true,  
watchOptions: {  
    ignored: /node_modules/, // 忽略监听文件  
    aggregateTimeout: 300,  //文件变动后多久发起构建  
    poll: 1000,  //每秒询问次数，越小越好  
} 

一、react-router4实现按需加载

•  单页应用按需加载一般原则：

        1.将网站划分成一个个小功能，在按照每个功能的相关度将他们分成几个类；

        2.将没一个类合并成一个chunk，按需加载对应的代码；

        3.不可将用户首次进入网站时需要看到画面的对应功能Chunk按需加载；

•  被分割出去的代码的加载需要一定的触发时机，即当用户操作了或者即将操作对应功能时再去加载对应的代码（默认使用react-router按需加载的触发条件是路由的变化）

•  实现条件：

        1.使用插件：npm i react-loadable;

        2.配合bable插件npm i @babel/plugin-syntax-dynamic-import;

•  代码示例： 

// .bablerc  
{  
  "plugins": ["@babel/plugin-syntax-dynamic-import"]  
}  
// 示例代码  
Loadable({  
  loader: () => import('./component'), //按需加载组件  
  loading: Loading, //处理组件加载的loading、error等  
  delay: 300  //延迟加载避免loading的闪烁问题  
});  
// Loading组件自定义  
// 接受三个props，其中pastDelay：等待时触发；timedOut：超时时触发超过delay；error：出错触发默认为200ms  
const Loading = ({ pastDelay, timedOut, error }) => {  
    if (pastDelay) {  
      return <Spin spinning tip="Loadding..." ><div style={{height: 300}} /></Spin>  
    } else if (timedOut) {  
      return <Spin spinning tip="Taking a long time..." ><div style={{height: 300}} /></Spin>  
    } else if (error) {  
      return <div>Error!</div>;  
    }  
    return null;  
}; 

二、提取公共代码webpack.optimization

optimization: {  
    splitChunks: {  
      chunks: "all",  
      cacheGroups: {  
        vendors: {   
            test: /node_modules/,  
            name: 'vendors',   
            minSize: 0,  
            minChunks: 1,   
            chunks: 'initial',  
            priority: 2 // 该配置项是设置处理的优先级，数值越大越优先处理   
        },  
        commons: {  
          name: "comomns",  
          test: resolve("src/components"), // 可自定义拓展规则  
          minChunks: 2, // 最小共用次数  
          minSize:0,   //代码最小多大，进行抽离  
          priority: 1, //该配置项是设置处理的优先级，数值越大越优先处理   
        }  
    }  
} 

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!