zoukankan      html  css  js  c++  java
  • vue cli 平稳升级webapck4

    webpack4 released 已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不满意,因此决定将当前在做的项目进行升级,正好也实践一下webpack4。

    新特性

    0配置

    应该是parcel出来以后,webpack团队意识到其配置确实有点复杂,不太容易上手。so, webapck4 开始支持0配置启动。不过,万变不离其宗,webpack4的0配置也只是支持了默认entry 和 output而已,即默认entry为./src,默认output为/dist。

    模式选择mode

    mode有两个可选项,production & development。作为必选项,mode是不可缺省的。在production模式下,会默认做一些必要的优化,如代码压缩和作用域提升,还会默认指定process.env.NODE_ENV 为 production。在development模式下,优化了增量构建,支持注释和提示,并且支持 eval 下的 source maps,同时默认指定process.env.NODE_ENV 为 development。

    sideEffects

    通过该配置可以大幅度减小打包体积。当模块的 package.json 配置sideEffects:false表明该模块没有副作用,也就意味着 webpack 可以安全地清除被用于重复导出(re-exports)的代码。

    模块类型

    webpack4提供了5种模块类型。

    
    json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)
    
    webassembly: WebAssembly 模块,(目前是 .wasm 文件的默认类型)
    
    javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统:CommonJS、AMD。
    
    javascript/esm: EcmaScript模块(默认 .mjs 文件)。
    
    javascript/dynamic: 仅支持 CommonJS & AMD。
    
    

    JSON

    webpack 4 不仅支持本地处理 JSON,还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时,webpack 会消除掉JSON Module 中未使用的导出。此外,如果要用 loader 转换 json 为 js,需要设置 type 为 javascript/auto。

    optimization

    Webpack 4 删除了 CommonsChunkPlugin,并默认启用了它的许多功能。因此webpack4可以实现很好的默认优化。但是,对于那些需要自定义的缓存策略,增加了 optimization.splitChunks 和 optimization.runtimeChunk。具体解释可参考这篇文章,解释得很详细。RIP CommonsChunkPlugin

    手把手升级

    我是把原来vue cli的项目做了一下升级,总体来说,升级还算是比较顺利步骤,这里我们分成两步走,首先升级相关依赖的插件,然后优化webapck配置文件。

    升级插件


    首先要把下面列表的插件升级到对应版本或者最新版本

    1. webpack@4.4.1
    2. css-loader@0.28.10,
    3. extract-text-webpack-plugin@4.0.0-beta.0,
    4. file-loader@1.1.11,
    5. html-webpack-plugin@3.1.0,
    6. optimize-css-assets-webpack-plugin@4.0.0,
    7. url-loader@1.0.1,
    8. vue-loader@14.2.2,
    9. vue-style-loader@4.1.0,
    10. vue-template-compiler@2.5.16,
    11. webpack-bundle-analyzer@2.11.1,
    12. webpack-dev-middleware@3.1.0,
    13. webpack-dev-server@3.1.1,
    14. webpack-hot-middleware@2.21.2

    如果遇到其他包报错,应该是升级到最新的就可以解决了。

    更新配置文件

    webpack.dev.conf.js

    dev环境变化不大,毕竟webpack4很大一部分的优化都是针对生产环境的,该文件我们只需要删除一些不再需要的插件既可以。例如:webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin,其功能webpack4已经默认配置。同时,要设置

    
    mode: 'development'
    

    webpack.production.conf.js

    webvpack4中改动最大,影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分,webpack runtime之类的代码,结合chunkhash,实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能,并且配置更加灵活,具体解释可参考这篇文章,解释得很详细。RIP CommonsChunkPlugin

    
    mode: 'production',
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\/]node_modules[\/]/,
            chunks: 'initial',
            name: 'vendors',
          },
          'async-vendors': {
            test: /[\/]node_modules[\/]/,
            minChunks: 2,
            chunks: 'async',
            name: 'async-vendors'
          }
        }
      },
      runtimeChunk: { name: 'runtime' }
    }
    

    总结

    总体来说本次升级还算顺利,不到一天搞定,目前感觉,打包速度大约优化了70%左右,同时打包后的代码体积也有了很大的优化,带来的效果很显著的。
    如果觉得我没有说明白,这里有一份配置,请拿走

    原文地址:https://segmentfault.com/a/1190000014169887

  • 相关阅读:
    Git 如何优雅地回退代码?
    如何让自己的技能变现?
    读了100本书,总结出读遍万卷书的 7 大方法
    08月10日总结
    08月09日总结
    08月08日总结
    08月06日总结
    08月04日总结
    08月03日总结
    剑指offer52 两个链表的第一个公共节点
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9919485.html
Copyright © 2011-2022 走看看