详解基于Vue,升级指南

By admin in 4858美高梅 on 2019年3月31日

webpack4在七月初的时候公布,本次webpack4有了三个名字”Legato”,也便是”连奏”的趣味,寓意webpack在持续进化,而且是无缝(no-gaps)的腾飞。webpack的进化点是通过捐献赠送者和用户投票来控制的,在此以前在介绍webpack3的时候,曾付出过投票数在前几名的优化点,集中在用户体验、创设质量(速度和产出大小)、通用和适配性(es
module、typescript、web
assemble)等。webpack4宣布了,上面将构成文书档案和推行,验证一下webpack是或不是贯彻了当初的诺言。

方今的话

webpack4 released
已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不惬意,因而控制将日前在做的品类进行升级换代,正好也实行一下webpack4。

webpack4 released
已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不令人满足,因而决定将近日在做的种类展开进步,正好也举行一下webpack4。

webpack4中的新天性

webpack3官方公告的时候,提到了下个本子或然的改动点,翻译过来如下所示:

  • 高质量的创设缓存
  • 升高开首化速度和增量营造功效
  • 更好的帮助Type Script
  • 修订短期缓存
  • 支撑WASM 模块帮助
  • 进步用户体验

webpack4官方发表的文书档案之中首要提及了以下新特征:

本文将详细介绍从webpack3到webpack4的提高历程

新特性

新特性

协理零布署(Zero Configuration)

该天性首要用于缓解webpack的门道高难点,webpack是一个配备证明式的操作情势,npm、gulp是指令式的,必要描述每一步是干什么的,而webpack的安插项凌乱且冬日,冬辰,让众多开发者高烧。
webpack4提供了零配置方案,默许入口属性为./src,暗中认可输出路径为./dist,不再要求配备文件,达成了开箱即用的包装能力,更易懂的讲,webpack会自动物检疫索项目中src目录下的index.js文件,然后选拔的格局开始展览对应的包装操作,最终新建dist目录并生成多少个main.js文件。其余针对开发条件和线上环境提供了三种包装格局:"production""development""production"格局内置了种类出现时的着力配备项,"development"方式基本满足了急速创设和支付体验。使用的措施是在运作webapck命令的时候,设置好mode参数的值即可,暗许是production属性。

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production" 
}

切切实实的案例可从前往github举行下载。

详解基于Vue,升级指南。上面依据官方的文书档案介绍一下三种形式。

  • Production模式

提供了公布程序时的优化安插项,意在更小的面世文件、更快的运营速度、不暴光源码和路径。会暗中同意选取代码压缩(minification),成效域升高(scope
hoisting),tree-shaking,NoEmitOnErrorsPlugin,无副功效模块修剪(side-effect-free
module pruning)等。

  • Development模式

意在进步开发调节和测试进程中的体验,如更快的营造速度、调节和测试时的代码易读性、暴光运转时的错误消息等。会暗许采取bundle的输出包罗路径名和eval-source-map等,提高代码的可读性和营造速度。

三种方式正是多少个箱子,箱子里面纵使各个插件工具,只是多少是敞开的,有个别是倒闭的,具体有怎样工具得以参照这篇文章。

概述

0配置

0配置

应该是parcel出来以往,webpack团队察觉到其配备确实有点复杂,不太不难上手。so,
webapck4
初叶帮助0配置运转。可是,万变不离其宗,webpack4的0配置也只是援助了暗中同意entry
和 output而已,即暗中同意entry为./src,默许output为/dist。

废弃CommonsChunkPlugin

webpack4废弃了CommonsChunkPlugin,引入了optimization.splitChunksoptimization.runtimeChunk,目的在于优化chunk的拆分。先介绍一下code
splitting下的CommonsChunkPlugin有如何毛病,然后仔介绍一下chunk
split是怎么进行优化的。

  • CommonsChunkPlugin的问题

CommmonsChunkPlugin的思路是Create this chunk and move all modules matching minChunks into the new chunk,即将满意minChunks配备想所设置的标准化的模块移到二个新的chunk文件中去,那几个思路是依照父子关系的,也等于那么些新面世的new
chunk是兼备chunk的老爸,在加载孩子chunk的时候,阿爸chunk是必须求超前加载的。举个例子:

example:
entryA:  vue  vuex  someComponents
entryB:  vue axios someComponents
entryC: vue vux axios someComponents
minchunks: 2 

并发后的chunk:

vendor-chunk:vue vuex axios
chunkA~chunkC: only the components

推动的标题是:对entryA和entryB来说,vendor-chunk都包蕴了剩余的module。
CommonsChunkPlugin此外1个标题是:对异步的模块不友好。下边也举例表明:

example:
entryA:  vue  vuex  someComponents
asyncB:vue axios someComponents
entryC: vue vux axios someComponents
minchunks: 2 

出现后的chunk:

vendor-chunk:vue vuex 
chunkA: only the components
chunkB: vue axios someComponents
chunkC: axios someComponents

带来的标题是:借使asyncB在entryA中动态引入,则会引入多余的module。
由此看来CommonsChunkPlugin有以下多个难题:

  1. 并发的chunk在引入的时候,会含有重复的代码;
  2. 不能够优化异步chunk;
  3. 高优的chunk产出供给的minchunks配置相比较复杂。
  • SplitChunksPlugin

与CommonsChunkPlugin的父子关系思路区别的是,SplitChunksPlugin引入了chunkGroup的定义,在入口chunk和异步chunk中发觉被重复使用的模块,将重叠的模块以vendor-chunk的款式分离出来,也正是vendor-chunk恐怕有多个,不再受限于是全数chunk中都合伙存在的模块,原理的表示如下图所示:
4858美高梅 1

其中,能够发现SplitChunksPlugin产出的vendor-chunk有七个,对于入口A来说,引入的代码只有chunkA、vendor-chunkA-B、vendor-chunkA-C、vendor-chunkA-B-C;那时候chunkA、vendor-chunkA-B、vendor-chunkA-C、vendor-chunkA-B-C形成了一个chunkGroup。上面举个列子:

example:
entryA:  vue  vuex  someComponents
entryB:vue axios someComponents
entryC: vue vux axios someComponents

出现后的chunk:

vendor-chunkA-C:vuex 
vendor-chunkB-C:axios
vendor-chunkA-B-C:vue
chunkA: only the components
chunkB: only the components
chunkC: only the components

SplitChunksPlugin能够消除掉CommonsChunkPlugin中涉嫌的三个难题,SplitChunksPlugin在production方式下是暗中认可开启的,可是它暗许只效力于异步chunk,假诺要效益于入口chunk的话,要求配备optimization.splitChunks.chunks: "all",同时webpack自动split
chunks是有几个限制条件的:

  1. 新面世的vendor-chunk是要被共享的,恐怕模块来自npm包;
  2. 新出现的vendor-chunk的分寸得超过30kb;
  3. 交互请求vendor-chunk的数额不能够凌驾六个;
  4. 对此entry-chunk而言,并行加载的vendor-chunk不可能超出三个。

这么些限制能够在SplitChunks的私下认可配置项中能够一一对应的看到。

splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    name: true,
    cacheGroups: {
        default: {
            minChunks: 2,
            priority: -20
            reuseExistingChunk: true,
        },
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        }
    }
}

实质上简单通晓这个限制,因为SplitChunksPlugin发生的结果正是原本chunk被拆分了,引入的公文数量会变多,由此须求在文书数量上开始展览限定。

  • runtimeChunkPlugin

在行使康芒斯ChunkPlugin的时候,我们一般会把webpack
runtime的根基函数提取出来,单独作为三个chunk,终归code
splitting想把不变的代码单独抽离出来,方便浏览器缓存,进步加载速度。webpack4甩掉了CommonsChunkPlugin,接纳了runtimeChunkPlugin能够将各类entry
chunk中的runtime部分的函数分离出来,只要求叁个简易的配置:optimization.runtimeChunk: true

对照于webpack3,webpack4能够零配置运转,打包速度比此前增长了九成,能够一向到ES6的代码进行无用代码剔除,新增的optimization使用简易

相应是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

在webapck2初步支持ESModule后,webpack提议了tree-shaking实行无用模块的铲除,主要重视ES
Module的静态结构。在webapck4从前,首要透过在.babelrc文件中装置"modules": false来拉开无用的模块检查和测试,该方法肯定相比暴虐。webapck4灵活增加了什么样对某模块举办无用代码检查和测试,主要通过在package.json文件中安装sideEffects: false来告诉编写翻译器该品种或模块是pure的,能够拓展无用模块删除。
官方的github上提供了一个sideEffects的demo示例供参考,若是对tree-shaking的概念不是太掌握,可去官方的文书档案中tree-shaking部分详细摸底。下边是官方提供的二个减包效果示例,仅供观赏。
4858美高梅 2

在今后,CSS、HTMl和文件都会成为原生模块

格局接纳mode

sideEffects

通过该配置可以不小减小包裹体量。当模块的 package.json
配置sideEffects:false注解该模块没有副功用,也就代表 webpack
能够高枕无忧地排除被用来重复导出(re-exports)的代码。

扶助压缩ES6+代码

在webapck4从前,webpack.prod.conf.js中有关UglifyJsPlugin的诠释会有如此一段话:

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify

意思即是UglifyJs不能对ES6+的代码举办削减,需利用babel-minify获取更好的treeshaking效果。webapck4最近早已支撑压缩ES6+的代码。

// 源代码
import {sayHello} from './libs/js/util.js'
let output = sayHello('hwm');
console.log(output);

// 产出
...let r=(e=>`Hello ${e}!`)("hwm");console.log(r)}...

【0配置】

mode有多少个可选用,production &
development。作为必选项,mode是不行缺省的。在production情势下,会默许做一些必备的优化,如代码压缩和成效域提高,还会暗许内定process.env.NODE_ENV

production。在development情势下,优化了增量营造,帮衬注释和提醒,并且支持eval 下的 source maps,同时私下认可钦点process.env.NODE_ENV 为
development。

模块类型

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。

支撑更加多的模块类型

webpack4支持以importexport方式加载和导出本地的WebAssembly模块,这一块作者其实项目尚未接纳到,暂不做牵线;其它,webpack4支持json模块和tree-shaking,此前json文件的加载须求json-loader的帮忙,webpack4已经能够协助json模块(JSON
Module),不必要万分的铺排;其它,当json文件用ESModule的语法import引入的时候,webpack4仍是可以支撑对json模块进行tree-shaking处理,把用不到的字段过滤掉,起到减包的功效。上边是个示范:

// 引用数据的三种方法
let jsonData = require('./data/test.json');

import jsonData from './data/test.json'

// 打包时只会提取test.json文件中onePart部分。
import { onePart } from './data/test.json' 

webpack4 设置了私下认可值,以便无配置运行项目

sideEffects

JSON

webpack 4 不仅帮助地方处理 JSON,还支持对 JSON 的 Tree Shaking。当使用
ESM 语法 import json 时,webpack 会解决掉JSON Module
中未利用的导出。其余,假若要用 loader 转换 json 为 js,要求安装 type 为
javascript/auto。

什么迁移升级到webpack4

  1. entry 暗许值是 ./src/
  2. output.path 默许值是 ./dist
  3. mode 默许值是 production

因此该配置能够一点都不小减小包裹容积。当模块的 package.json
配置sideEffects:false申明该模块没有副作用,也就象征 webpack
能够安全地解除被用于重复导出(re-exports)的代码。

optimization

Webpack 4 删除了
CommonsChunkPlugin,并暗中认可启用了它的比比皆是功用。由此webpack4能够兑现很好的默许优化。但是,对于那么些须求自定义的缓存策略,扩大了
optimization.splitChunks 和
optimization.runtimeChunk。具体解释可参考那篇小说,解释得很详细。RIP
CommonsChunkPlugin

0配置的局限性

webpack4声称能够0配置,可是0配置有许多局限性,比如不得不是单入口的种类,入口和产出的文书名是永恒的,entry是src目录下的index.js,产出是dist目录下的main.js,很明显不能满意实际项目选取。于是,开发者依然得温馨布署webpack.config.js文件。

【模块类型】

模块类型

手把手升级

自家是把原来vue
cli的项目做了须臾间升任,总体来说,升级还算是比较顺利步骤,那里大家分成两步走,首先升级相关依赖的插件,然后优化webapck配置文件。

webpack4配置文件的变化点

何以布置webpack4下的布局文件,须要大概领会webapck4的布置项的改动点。
mode:开发形式 development

  • 敞开dev-tool,方便浏览器调试
  • 提供详细的不当提示
  • 动用缓存机制,完毕火速创设
  • 开启output.pathinfo,在产出的bundle中显得模块路径音讯
  • 开启NamedModulesPlugin
  • 开启NoEmitOnErrorsPlugin

mode:生产方式 production

  • 运维各样优化插件(ModuleConcatenationPlugin、optimization.minimize、ModuleConcatenationPlugin、Tree-shaking),压缩、合并、拆分,产出更小体量的chunk
  • 关门内部存款和储蓄器缓存
  • 开启NoEmitOnErrorsPlugin

plugin

  • 放手optimization.minimize来裁减代码,不用再呈现引入UglifyJsPlugin;
  • 废弃CommonsChunkPlugin插件,使用optimization.splitChunks和optimization.runtimeChunk来代替;
  • 使用optimization.noEmitOnErrors来替换NoEmitOnErrorsPlugin插件
  • 使用optimization.namedModules来替换NamedModulesPlugin插件

loader

  • 扬弃json-loader,友好扶助json模块,以ESMoudle的语法引入,还是能对json模块实行tree-shaking处理;

其余的变动音讯提议查看webpack的粤语升级日志。

webpack4提供了5种模块类型

webpack4提供了5种模块类型。

晋级插件

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

  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

一旦蒙受别的包报错,应该是进步到最新的就足以消除了。

vue-cli项目怎么改造

介绍完了webpack4中基本配置项的变迁,接下去结合vue-cli示例项目介绍一下,怎样铺排webpack.conf.js文件。
1.升级npm包版本

建议提高webpack4,同时晋级涉及到的loaders和plugins。webpack4 中 cli
工具分别成了 webpack 大旨库 与 webpack-cli 命令行工具三个模块,须要接纳CLI ,必安装 webpack-cli 至项目中。

npm i webpack webpack-cli webpack-dev-server -D

关系到的插件有:

"vue-loader": "^15.0.10",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"copy-webpack-plugin": "^4.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.1.0",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-dev-middleware": "^3.1.2",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "^4.1.0"

2.修改webpack.base.conf.js

webpack4推荐应用了最新版本的vue-loader(”vue-loader”:
“^15.0.10″),可是最新的vue-loader要求在webapck
config文件中装置VueLoaderPlugin插件,不然会报以下错误:

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

webpack.base.conf.js文件中的改动重若是添加VueLoaderPlugin插件。

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    ...
    plugins: [
        // 添加VueLoaderPlugin,以响应vue-loader
        new VueLoaderPlugin()
  ],
    ...
}

3.修改webpack.dev.conf.js

拉长mode属性,并设置为development形式;然后注释掉
webpack4开发形式已经松手的插件,如webpack.NamedModulesPluginwebpack.NoEmitOnErrorsPlugin
插件。
4858美高梅 3

4.修改webpack.prod.conf.js

添加mode属性,并设置为production情势;然后注释掉
webpack4生育格局已经嵌入的插件,如CommonsChunkPluginuglifyjs-webpack-plugin
ModuleConcatenationPlugin插件;最终依照webpack4提供的文书档案配置optimization,使用splitChunksruntimeChunk成功chunk的领到和优化。
4858美高梅 4

const webpackConfig = merge(baseWebpackConfig, {
...
    optimization: {
    // 采用splitChunks提取出entry chunk的chunk Group
    splitChunks: {
      cacheGroups: {
        // 处理入口chunk
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial',
          name: 'vendors',
        },
        // 处理异步chunk
        'async-vendors': {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          name: 'async-vendors'
        }
      }
    },
    // 为每个入口提取出webpack runtime模块
    runtimeChunk: { name: 'manifest' }
  }
...
})

透过以上操作,我们早已基本做到了vue-cli项指标改造。运维项目标时候,注意看控制台的报错,是哪些插件报的错就去升高万分插件,借使存在找不到模块之类的谬误就去提高对应的loader。vue-cli项目webapck4下布署demo已经上传到github,欢迎下载。

  1. json: 可由此 require 和 import 导入的 JSON 格式的数码(默许为 .json
    的文件)
  2. webassembly: WebAssembly 模块,(方今是 .wasm 文件的默许类型)
  3. javascript/auto: (webpack
    3中的暗中认可类型)辅助具有的JS模块系统:CommonJS、英特尔。
  4. javascript/esm: EcmaScript模块(默认 .mjs 文件)。
  5. javascript/dynamic: 仅支持 CommonJS & AMD。
  1. json: 可经过 require 和 import 导入的 JSON 格式的数据(私下认可为 .json
    的公文)
  2. webassembly: WebAssembly 模块,(近日是 .wasm 文件的暗许类型)
  3. javascript/auto: (webpack
    3中的私下认可类型)扶助全数的JS模块系统:CommonJS、英特尔。
  4. javascript/esm: EcmaScript模块(默认 .mjs 文件)。
  5. javascript/dynamic: 仅支持 CommonJS & AMD。

履新配备文件

实例说话—webpack4的习性怎样

webapck4意在开发格局下提高创设速度、升高用户体验,在生育情势下减小产出包的轻重,升高加载和周转速度,上面是webapck3和webapck4下vue-cli的webapck模板项指标实效截图:
开发者格局下:
4858美高梅 5

4858美高梅 6
由上海教室能够明白:webapck4下的营造速度是3703ms,分明是因为webapck3下的5617ms;

生儿育女格局下:
4858美高梅 7

4858美高梅 8
由上航海用体育场合能够掌握:webapck4下的app-chunk的尺寸是933byte,分明低于webapck3下的11.6K;webapck4下vendor-chunk的深浅是109K,小于webapck3下的112K。
三种格局下,webapck4品质上着实是精进不少,就算有各样坑,依然提出把坑填了,升级到webpack4。

webpack 4 不仅帮忙地点处理 JSON,还援救对 JSON 的 Tree Shaking。当使用
ESM 语法 import json 时,webpack 会化解掉JSON Module
中未利用的导出。此外,借使要用 loader 转换 json 为 js,需要设置 type 为
javascript/auto

JSON

webpack.dev.conf.js

dev环境转变相当小,毕竟webpack4十分的大学一年级些的优化都是对准生产条件的,该文件我们只要求删除一些不再供给的插件既能够。例如:webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin,其功效webpack4已经暗许配置。同时,要设置

mode: 'development'

webpack的未来

想理解webpack的前途,建议先过一下webpack的野史。
webpack1支撑CMD和英特尔,同时持有丰盛的plugin和loader,webpack逐渐获得广泛应用。
webpack2相对于webpack最大的改革正是协助ES Module,能够直接分析ES
Module之间的借助关系,而webpack1亟须将ES
Module转换到CommonJS模块然后,才能选拔webpack进行下一步处理。除了那么些之外webpack2扶助tree
sharking,与ES Module的安插思路中度契合。
webpack3相对于webpack2,过渡相对平静,然而新的表征大都围绕ES
Module提议,如Scope Hoisting和Magic Comment。
webpack4集中发力在用户体验、塑造质量(速度和产出大小)、通用和适配性(es
module、typescript、web assemble)。
展望现在,webpack的前景自然不止升级用户体验、下跌利用门槛,进一步提高营造速度和产出代码的品质,同时webpack的团伙曾经答应会基于社区的投票来控制新特征开发优先权。以下是通知中付出的前景的要紧关切点:

  • 继续修订长期缓存
  • webapck职责十二线程化,提升起头化速度和增量创设效用
  • 升级CSS到一等人民,引入CSS Module
    Type ,吐弃ExtractTextWebpackPlugin
  • 升迁HTML到一等平民,引入HTML Module Type 
  • 继承扩充0CJS(0配置文件),加入越来越多扩充
  • 优化援助WASM 模块,从尝试阶段联网到安宁阶段
  • 穿梭升级用户体验

模式mode

webpack 4 不仅辅助本地处理 JSON,还支持对 JSON 的 Tree Shaking。当使用
ESM 语法 import json 时,webpack 会消除掉JSON Module
中未选择的导出。别的,假如要用 loader 转换 json 为 js,必要安装 type 为
javascript/auto。

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' } }

参考文献

webapck4官方medium
pr稿
webpack4华语升级日志
webpack4升级指南以及从webpack3.x搬迁
Webpack4 新特点 及
Vue-cli项目升级
Webpack4官方辅导教程
webpack4.0打包优化策略整理
webapck3新特性

相对而言于webpack3,webpack4新增了二个mode配置选拔,用来代表配置格局的选料景况

optimization

总结

完全来说此次提拔还算顺遂,不到一天消除,如今感觉到,打包速度大概优化了十分七左右,同时包装后的代码容量也有了不小的优化,带来的意义很鲜明的。
只要以为本人未曾说精通,那里有一份配置,请拿走

module.exports = {
 mode: 'production'
}

Webpack 4 删除了
CommonsChunkPlugin,并私下认可启用了它的居多职能。因而webpack4能够兑现很好的默许优化。不过,对于那么些需求自定义的缓存策略,扩展了
optimization.splitChunks 和
optimization.runtimeChunk。具体表明可参考那篇作品,解释得很详细。福特ExplorerIP
CommonsChunkPlugin点击预览

包含生产环境production、开发条件devolopment和自定义none那五个选用可选

手把手升级

【开发情势】

自笔者是把原本vue
cli的项目做了眨眼间间升任,总体来说,升级还算是比较顺遂步骤,那里我们分成两步走,首先升级相关正视的插件,然后优化webapck配置文件。

  1. 浏览器调节和测试工具
  2. 注明、开发阶段的详实错误日志和提醒
  3. 火速和优化的增量营造机制
  4. 拉开 output.pathinfo 在 bundle 中彰显模块新闻
  5. 开启 NamedModulesPlugin
  6. 开启 NoEmitOnErrorsPlugin

进步插件

【生产情势】

首先要把下边列表的插件升级到对应版本可能最新版本

  1. 启用全数优化代码的效益
  2. 更小的bundle大小
  3. 除去只在开发阶段运营的代码
  4. 关闭内部存款和储蓄器缓存
  5. Scope hoisting 和 Tree-shaking
  6. 开启 NoEmitOnErrorsPlugin
  7. 开启 ModuleConcatenationPlugin
  8. 开启 optimization.minimize

webpack@4.4.1
css-loader@0.28.10,
extract-text-webpack-plugin@4.0.0-beta.0,
file-loader@1.1.11,
html-webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware@3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2

【none】

一经遭遇其余包报错,应该是升级到新型的就足以消除了。

剥夺全体的默许设置

立异配备文件

optimization

webpack.dev.conf.js

从webpack4开头官方移除了commonchunk插件,改用了optimization属性实行更进一步灵活的配置,上面来介绍optimization下的局部常用配置项

dev环境变迁一点都不大,终究webpack4相当的大学一年级些的优化都以针对性生产条件的,该公文大家只供给删除一些不再要求的插件既能够。例如:webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin,其成效webpack4已经暗中同意配置。同时,要安装

【minimize】

mode: ‘development’
webpack.production.conf.js

使用unglifyjsWebpackPlugin插件来减弱模块,生产条件下该值私下认可为true

webvpack4中改变最大,影响也最大的正是webpack4使用optimization.splitChunks替代了康芒斯ChunkPlugin。在此以前的CommonsChunkPlugin首要用于抽取代码中的共用部分,webpack
runtime之类的代码,结合chunkhash,实现最佳的缓存策略。而optimization.splitChunks则达成了相同的功用,并且陈设尤其灵敏,具体表达可参看那篇作品,解释得很详细。

optimization: {
  minimize: false
 }
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' }
}

【minimier】

总结

能够采用其余插件来推行压缩功用

一体化来说本次升迁还算顺遂,不到一天消除,近来感觉,打包速度大致优化了7/10左右,同时包装后的代码体量也有了非常大的优化,带来的机能很显眼的。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
 //...
 optimization: {
  minimizer: [
   new UglifyJsPlugin({ /* your config */ })
  ]
 }
};

【splitChunks】

webpack4默许使用splitChunksPlugin插件来贯彻代码分割功用,来顶替webpack3中的commonChunksPlugin插件

module.exports = {
 //...
 optimization: {
  splitChunks: {
   chunks: 'async',
   minSize: 30000,
   minChunks: 1,
   maxAsyncRequests: 5,
   maxInitialRequests: 3,
   automaticNameDelimiter: '~',
   name: true,
   cacheGroups: {
    vendors: {
     test: /[\\/]node_modules[\\/]/,
     priority: -10
    },
    default: {
     minChunks: 2,
     priority: -20,
     reuseExistingChunk: true
    }
   }
  }
 }

【runtimeChunk】

透过设置 runtimeChunk: true 来为每3个入口暗中同意添加1个只包涵 runtime 的
chunk

透过提供字符串值,能够采纳插件的预设形式

  1. signal: 创制3个被抱有变更的块共享的runtime文件
  2. multiple: 为共同的块创制四个runtime文件

缺省值为false,表示每一种入口块暗中同意内嵌runtime代码

runtimeChunk {
   name: "runtime"
  }

【noEmitOnErrors】

一经在编写翻译时现身错误,就利用noEmitOnErrors属性来跳过emit 阶段,用来替代
NoEmitOnErrorsPlugin 插件

【nameModules】

利用可读的模块标识,方便更好的调节。webpack在付出形式下暗许开启,生产方式下默许关闭,用来替代
NamedModulesPlugin 插件

module.exports = {
 //...
 optimization: {
  namedModules: true
 }
};

升级

4858美高梅 ,上边就基于vue-cli的品类对webpack配置举办提高

1、升级nodejs

利用 webpack4 时,必须确定保证 Node.js 版本 >= 8.9.4,因为 webpack4
使用了大气的ES6语法,这一个语法在 nodejs新版 v8 中赢得了原生扶助

② 、升级webpack首要部件,蕴涵webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge

提拔的操作很简单,先删除,再设置即可。但要注意的是webpack4版本中 cli
工具分别成了 webpack 宗旨库 与  webpack-cli
命令行工具多个模块,须求运用  CLI ,必安装  webpack-cli 至项目中

cnpm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge
cnpm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge

③ 、升级webpack相关插件,包涵copy-webpack-plugin、css-loader、eslint-loader、file-loader、html-webpack-plugin、url-loader、friendly-errors-webpack-plugin、optimize-css-assets-webpack-plugin、uglifyjs-webpack-plugin

cnpm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
cnpm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin

4、升级vue-loader

是因为vue-loader升级到版本15后,配置有较多的成形,妥贴起见,能够只将vue-loader升级到14.4.2

cnpm uninstall -D vue-loader
cnpm uninstall -D vue-loader@14.4.2

⑤ 、替换webpack相关插件,extract-text-webpack-plugin替换为mini-css-extract-plugin

cnpm uninstall -D extract-text-webpack-plugin


cnpm install -D mini-css-extract-plugin

配置

上面对配备文件的修改举行详细表明:

1、webpack.base.conf.js文件

增加node:process.env.NODE_ENV即可

module.exports = {
+ mode: process.env.NODE_ENV,
...

2、webpack.prop.conf.js文件

该文件的布署项较为复杂

(1)将ExtractTextPlugin替换为MiniCssExtraPlugin

+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
- const ExtractTextPlugin = require('extract-text-webpack-plugin')

...
-  new ExtractTextPlugin({
+  new MiniCssExtractPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css'),
   allChunks: true,
  }),
...

(2)删除UglifyJsPlugin配置项

- const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
...
- new UglifyJsPlugin({
-   uglifyOptions: {
-    compress: {
-     warnings: false
-    }
-   },
-   sourceMap: config.build.productionSourceMap,
-   parallel: true
- })

(3)删除CommonsChunkPlugin配置项

- new webpack.optimize.CommonsChunkPlugin({
-   name: 'vendor',
-   minChunks (module) {
-    return (
-     module.resource &&
-     /\.js$/.test(module.resource) &&
-     module.resource.indexOf(
-      path.join(__dirname, '../node_modules')
-     ) === 0
-    )
-   }
-  }),
-  new webpack.optimize.CommonsChunkPlugin({
-   name: 'manifest',
-   minChunks: Infinity
-  }),
-  new webpack.optimize.CommonsChunkPlugin({
-   name: 'app',
-   async: 'vendor-async',
-   children: true,
-   minChunks: 3
-  }), 
...

(4)添加optimization配置项

+ optimization: {
+  splitChunks: {
+   chunks: 'async',
+   minSize: 30000,
+   minChunks: 1,
+   maxAsyncRequests: 5,
+   maxInitialRequests: 3,
+   automaticNameDelimiter: '~',
+   name: true,
+   cacheGroups: {
+    vendors: {
+     test: /[\\/]node_modules[\\/]/,
+     priority: -10
+    },
+    default: {
+     minChunks: 2,
+     priority: -20,
+     reuseExistingChunk: true
+    }
+   }
+  },
+  runtimeChunk: { name: 'runtime' }
+ },

详尽布置移动前端小站源码

上述就是本文的全部内容,希望对大家的学习抱有协助,也冀望我们多多支持脚本之家。

您只怕感兴趣的稿子:

  • 记1次webpack3升迁webpack4的踩坑经历
  • 详解webpack4升级指南以及从webpack3.x搬迁

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有