当前位置 主页 > 网站技术 > 代码类 >

    webpack4 optimization使用总结

    栏目:代码类 时间:2019-11-10 12:09

    optimization总结

    minimize

    默认为true,效果就是压缩js代码。

    minimizer

    可以自定义UglifyJsPlugin和一些配置,默认的压缩为uglifyjs-webpack-plugin

    //比如在构建的时候,希望新增css的压缩
    minimizer:
     mode === "development"
      ? []
      : [
        new UglifyJsPlugin({
         cache: true,
         parallel: true,
         sourceMap: mode === "development"
        }),
        new OptimizeCSSAssetsPlugin()
       ]

    runtimeChunk

    默认为false,runtime相关的代码(各个模块之间的引用和加载的逻辑)内嵌入每个entry

    true:对于每个entry会生成runtime~${entrypoint.name}的文件。

    'single': 会生成一个唯一单独的runtime.js文件,就是manifest

    multiple:和true一致。name:{}:自定义runtime文件的name

    noEmitOnErrors

    默认为true,编译错误的时候是否不生成资源。

    namedModules,namedChunks

    development默认都为true,production默认为false,选择是否给modulechunk更有意义的名称。

    nameModules:true这里会显示路径

    nameModules:false直接采用索引自增

    namedChunks:true

    namedChunks:false采用索引

    moduleIds

    一般不建议配置namedModules,namedChunks
    针对module的配置,这里会取hashed

    针对chunk的配置,特别是异步代码一般会采用@vue-cli3推荐的插件

    removeAvailableModules,removeEmptyChunks,mergeDuplicateChunks,flagIncludedChunks