详解基于Vue,连奏中的进化

永利402com官方网站 8
永利402com官方网站

webpack四在4月中的时候发表,本次webpack四有了三个名字”Legato”,也便是”连奏”的意趣,暗意webpack在持续开发进取,而且是无缝(no-gaps)的前进。webpack的进化点是透过捐献者和用户投票来调整的,在此以前在介绍webpack3的时候,曾提交过投票数在前几名的优化点,聚焦在用户体验、创设品质(速度和出现大小)、通用和适配性(es
module、typescript、web
assemble)等。webpack四发布了,上边将整合文书档案和试行,验证一下webpack是不是贯彻了当初的诺言。

前方的话

webpack4中的新特色

webpack3官方发表的时候,提到了下个版本只怕的更改点,翻译过来如下所示:

  • 高质量的创设缓存
  • 进级发轫化速度和增量营造功用
  • 越来越好的支撑Type Script
  • 修订短时间缓存
  • 帮衬WASM 模块援救
  • 晋级用户体验

webpack4官方宣布的文书档案之中主要谈起了以下新特点:

本文将详细介绍从webpack三到webpack4的晋升历程

援救零安排(Zero Configuration)

该性子主要用于减轻webpack的妙方高难题,webpack是贰个配备证明式的操作格局,npm、gulp是指令式的,必要描述每一步是为啥的,而webpack的布署项凌乱且冬季,让众多开采者脑瓜疼。
webpack肆提供了零配置方案,暗许入口属性为./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举行下载。

上边依照官方的文档介绍一下二种形式。

  • Production模式

提供了公布程序时的优化布局项,意在越来越小的产出文件、更加快的周转速度、不暴光源码和路径。会暗中认可采纳代码压缩(minification),作用域提高(scope
hoisting),tree-shaking,NoEmitOnErrorsPlugin,无副功用模块修剪(side-effect-free
module pruning)等。

  • Development模式

意志提高开辟调节和测试进程中的体验,如越来越快的构建速度、调试时的代码易读性、揭露运维时的错误音讯等。会暗中认可选用bundle的出口蕴涵路线名和eval-source-map等,升高代码的可读性和营造速度。

二种方式便是多个箱子,箱子里面就是各个插件工具,只是稍稍是敞开的,某个是关门的,具体有怎么样工具得以参考那篇小说。

永利402com官方网站,概述

废弃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中都协同存在的模块,原理的暗示如下图所示:
永利402com官方网站 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能够消除掉康芒斯ChunkPlugin中涉及的三个难点,SplitChunksPlugin在production方式下是私下认可开启的,不过它私下认可只服从于异步chunk,假使要效益于入口chunk的话,须要配置optimization.splitChunks.chunks: "all",同时webpack自动split
chunks是有多少个限制条件的:

  1. 新面世的vendor-chunk是要被共享的,也许模块来自npm包;
  2. 新出现的vendor-chunk的深浅得高于30kb;
  3. 互相之间请求vendor-chunk的多寡无法超过5个;
  4. 对于entry-chunk来讲,并行加载的vendor-chunk没办法高出3个。

这几个限制能够在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

在使用CommonsChunkPlugin的时候,大家平时会把webpack
runtime的底子函数提抽出来,单独作为2个chunk,终归code
splitting想把不改变的代码单独抽离出来,方便浏览器缓存,升高加载速度。webpack4放任了康芒斯ChunkPlugin,采取了runtimeChunkPlugin能够将每种entry
chunk中的runtime部分的函数分离出来,只须要2个简短的计划:optimization.runtimeChunk: true

相对来说于webpack3,webpack四能够零配置运营,打包速度比此前增加了十分之九,能够直接到ES6的代码进行无用代码剔除,新添的optimization使用简易

sideEffects

在webapck二开首补助ESModule后,webpack提出了tree-shaking举行无用模块的消除,首要正视ES
Module的静态结构。在webapck肆从前,紧要透过在.babelrc文件中设置"modules": false来开启无用的模块检查测试,该方法明显比较凶狠。webapck四灵活扩张了如何对某模块举行无用代码检查评定,首要通过在package.json文件中装置sideEffects: false来告诉编写翻译器该项目或模块是pure的,能够拓展无用模块删除。
法定的github上提供了贰个sideEffects的demo示例供参考,要是对tree-shaking的定义不是太驾驭,可去官方的文书档案中tree-shaking部分详细询问。下边是合法提供的叁个减包效果示例,仅供观赏。
永利402com官方网站 2

在以往,CSS、HTMl和文书都会变成原生模块

支撑压缩ES陆+代码

在webapck四此前,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不能够对ES六+的代码实行压缩,需利用babel-minify获取更加好的treeshaking效果。webapck肆目前已经支持压缩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配置】

扶助越来越多的模块类型

webpack4支持以importexport方式加载和导出当地的WebAssembly模块,这一块小编实际项目尚未采纳到,暂不做牵线;此外,webpack四帮衬json模块和tree-shaking,以前json文件的加载供给json-loader的支撑,webpack四已经能够支持json模块(JSON
Module),不须要卓绝的配置;其余,当json文件用ESModule的语法import引进的时候,webpack四仍是能够援助对json模块进行tree-shaking管理,把用不到的字段过滤掉,起到减包的效能。下边是个示范:

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

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

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

webpack四 设置了私下认可值,以便无配置运转项目

哪些迁移晋级到webpack4

  1. entry 私下认可值是 ./src/
  2. output.path 默许值是 ./dist
  3. mode 私下认可值是 production

0配置的局限性

webpack四声称能够0配置,不过0配置有繁多局限性,比如不得不是单入口的档次,入口和出现的文本名是一定的,entry是src目录下的index.js,产出是dist目录下的main.js,很显然不能够满足实际项目应用。于是,开垦者照旧得温馨安顿webpack.config.js文件。

【模块类型】

webpack4配置文件的变化点

怎么着安顿webpack四下的配备文件,供给大致明白webapck四的布署项的改动点。
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的汉语晋级日志。

webpack四提供了⑤种模块类型

vue-cli项目什么改换

介绍完了webpack四中挑寿春配置项的变化,接下去结合vue-cli示例项目介绍一下,怎样安插webpack.conf.js文件。
1.升级npm包版本

提出进级webpack四,同时进步涉及到的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”:
“^壹5.0.拾”),可是最新的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
插件。
永利402com官方网站 3

4.修改webpack.prod.conf.js

增加mode属性,并安装为production方式;然后注释掉
webpack肆生产形式已经嵌入的插件,如CommonsChunkPluginuglifyjs-webpack-plugin
ModuleConcatenationPlugin插件;最终依照webpack4提供的文书档案配置optimization,使用splitChunksruntimeChunk成就chunk的提取和优化。
永利402com官方网站 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项目webapck肆下安顿demo已经上传到github,迎接下载。

  1. json: 可通过 require 和 import 导入的 JSON 格式的数额(默以为 .json
    的文本)
  2. webassembly: WebAssembly 模块,(近期是 .wasm 文件的暗中同意类型)
  3. javascript/auto: (webpack
    三中的私下认可类型)支持具有的JS模块系统:CommonJS、英特尔。
  4. javascript/esm: EcmaScript模块(默认 .mjs 文件)。
  5. javascript/dynamic: 仅支持 CommonJS & AMD。

实例说话—webpack四的性质怎样

webapck肆意在开采形式下进步营造速度、提高用户体验,在生育方式下减小产出包的高低,升高加载和运维速度,下边是webapck3和webapck四下vue-cli的webapck模板项目的实效截图:
开采者形式下:
永利402com官方网站 5

永利402com官方网站 6
由上海教室可以清楚:webapck四下的营造速度是370三ms,明显是因为webapck3下的5617ms;

生产方式下:
永利402com官方网站 7

永利402com官方网站 8
由上海体育场所能够清楚:webapck四下的app-chunk的深浅是93三byte,显著低于webapck3下的1一.6K;webapck4下vendor-chunk的轻重是10玖K,小于webapck三下的112K。
两种格局下,webapck四品质上实在是精进不少,纵然有各个坑,依然提出把坑填了,进级到webpack4。

webpack 四 不仅扶助地方管理 JSON,还援救对 JSON 的 Tree Shaking。当使用
ESM 语法 import json 时,webpack 会化解掉JSON Module
中未利用的导出。其它,假如要用 loader 调换 json 为 js,供给安装 type 为
javascript/auto

webpack的未来

想通晓webpack的前景,建议先过一下webpack的历史。
webpack一援救CMD和英特尔,同时兼有丰硕的plugin和loader,webpack慢慢得到分布应用。
webpack贰相对于webpack最大的改进正是援救ES Module,可以一贯分析ES
Module之间的借助关系,而webpack一亟须将ES
Module转变来CommonJS模块然后,才具使用webpack实行下一步管理。除外webpack二帮忙tree
sharking,与ES Module的筹算思路中度吻合。
webpack三相对于webpack2,过渡相对平静,可是新的性状大都围绕ES
Module建议,如Scope Hoisting和Magic Comment。
webpack四聚集发力在用户体验、创设品质(速度和出现大小)、通用和适配性(es
module、typescript、web assemble)。
展望未来,webpack的前程势必不止升级用户体验、降低利用门槛,进一步进步营造速度和出现代码的品质,同时webpack的团协会曾经承诺会基于社区的投票来支配新性子开拓优先权。以下是公告中付出的今后的基本点关心点:

  • 一而再修订短期缓存
  • webapck职责拾2线程化,升高开头化速度和增量营造功能
  • 升级CSS到一等老百姓,引进CSS Module
    Type ,吐弃ExtractTextWebpackPlugin
  • 进级HTML到一等人民,引入HTML Module Type 
  • 持续扩充0CJS(0配置文件),加入愈多扩张
  • 优化扶助WASM 模块,从试验阶段联网到平安阶段
  • 不止晋级用户体验

模式mode

参考文献

webapck4官方medium
pr稿
webpack4国语晋级日志
webpack肆升级指南以及从webpack3.x搬迁
Webpack四 新个性 及
Vue-cli项目升级
Webpack四合法引导教程
webpack四.0打包优化计谋整理
webapck3新特性

相对来讲于webpack3,webpack肆新添了三个mode配置采取,用来表示配置格局的挑选情形

module.exports = {
 mode: 'production'
}

包蕴生产条件production、开垦条件devolopment和自定义none那八个选用可选

【开拓情势】

  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

【none】

剥夺全部的暗许设置

optimization

从webpack肆先河官方移除了commonchunk插件,改用了optimization属性实行进一步灵敏的配备,上面来介绍optimization下的1对常用配置项

【minimize】

应用unglifyjsWebpackPlugin插件来减弱模块,生产情形下该值默以为true

optimization: {
  minimize: false
 }

【minimier】

可以运用其它插件来实践压缩成效

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

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

【splitChunks】

webpack四暗中同意使用splitChunksPlugin插件来完结代码分割功用,来替代webpack三中的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 来为每1个输入暗许增加2个只含有 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
 }
};

升级

上边就基于vue-cli的类型对webpack配置举行进步

1、升级nodejs

接纳 webpack4 时,必须保险 Node.js 版本 >= 八.玖.肆,因为 webpack四使用了汪洋的ES陆语法,那么些语法在 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晋级到版本一5后,配置有较多的生成,稳当起见,能够只将vue-loader进级到1四.四.二

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

5、替换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' }
+ },

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

如上正是本文的全体内容,希望对大家的求学抱有帮忙,也希望我们多多辅助脚本之家。

您只怕感兴趣的小说:

  • 记一遍webpack3升官webpack4的踩坑经历
  • 详解webpack4进级指南以及从webpack三.x搬迁

发表评论

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

网站地图xml地图