webpack的性能优化配置：Tree shaking , 拆分等

二，Tree shaking   （生产模式默认启用，由TerserPlugin）

　　上下文未用到的代码，不会被打包

　　要基于ES6：import  export。

　　sideEffects：不需要被Tree shaking的文件,需要列出来，有可能误删代码，如模块中的css，全局变量等。

// package
"sideEffects": [
        "*.css",
        "*.vue"
    ],

 

　　babel配置影响：保留es6的模块化语法，不需要转成其他模块化语法。babel.config.js : module：false

三，提升构建的速度

　　noParse：一些库不需要解析，没有使用模块化方式import ， export的库或独立的库。eg：loadsh。

　　DllPlugin：  避免打包时，对不变的库进行重复构建。提取成动态链接的方式，进行引用。拆分bundles。

　　　　　　　　eg：react，react-dom（比较稳定的库）

四，按需加载

　　1，通过entry入口文件（多个）。特点：需手工维护入口文件，入口文件有可能有重复引用，重复打包。

　　2，防止重复：使用 splitChunk 去除重复引用和分离（第三方库和业务） chunk。

optimization:{ //实现按需加载，将业务代码 与 带三方库代码进行分离
    splitChunks: {
      cacheGroups: {
        vendor:{ //第三方库
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
          minSize: 0,
          minChunks: 1,
          priority: 10 ,// 资源加载优先级
          chunks: 'initial' //同步
        },
        common: { //公共代码
          name: 'common',
          test: /[\\/]src[\\/]/,
          chunks: 'all', //静态引入，和动态引入都考虑在内
        }
      }
    }
  },

　　3，动态加载：通过模块的内联函数调用来分离代码。import('..').then(_ => {})