webpack

tree shaking

• 使用es6的inport和export
• 在项目package.json文件中，添加一个“sideEffects”入口： 向webpack的compiler提供提示那些代码是"纯粹部分"，如果所有代码都不包含副作用（副作用：在导入时会执行特殊行为的代码，而不是仅仅暴露一个或多个export，比如css文件），我们可以简单的标记为false，这样webpack就知道它删除任何未使用的export导出都是安全的。如果确实有代码是有副作用的，可以把这些文件以数组的形式罗列：["./src/effectful-file.js", “*.css”]。 我们还可以在module.rules中配置sideEffects

module.rules: [
  {
    include: path.resolve("node_modules", "lodash"),
    sideEffects: false
  }
] 

• 引入一个能够删除未引用代码的压缩工具，如UglifyJSPlugin:
  • 可以用-p这个webpack编译标记来启用uglifyjs插件
  • webpack4后也可以在webpack.config.js中配置"mode": “production”
  • –optimize-minimize编译标记也可以

tips

css去重: 使用plugins：optimize-css-assets-webpack-plugin

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

 			new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.css$/g,
                cssProcessor: require('cssnano'),
                cssProcessorPluginOptions: {
                    preset: [ 'default', { discardComments: { removeAll: true } }]
                },
                canPrint: true
            })
 

发布报错：

因为用nextjs 所以是在next.config.js里边new webpack配置的，因此require时如果是dev依赖，只写在webpack里面，不然打包没问题，上线会报错。