性能优化篇---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, //该设置项是配置处理赏罚的优先级，数值越大越优先处理赏罚   
        }  
    }  
} 

（编辑：湖南网）

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