全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonThunk
 
1. 提取公用代码的作用:
减少代码的冗余
提高用户的加载速度
单页面减少下载,多页面可以使用缓存
2. webpack3.0 中的 commonsChunkPlugin 插件
webpack的内置插件 webpack.optimize.CommonsChunkPlugin
配置项:
options.name / options.names thunk的名称
options.filename 打包后的文件名称
options.minChunks 公用的次数(多少次会被提取): 可以是数字、函数和
options.chunks 指定提取代码的范围
options.children
options.deepChildren 是否在子模块看中继续提取公用代码
options.async 创建一个异步的公共代码块
3. 不同场景的配置
单页应用:
多页应用:
多页应用+第三方依赖+webpack生成代码
4. 安装环境
npm install webpack --save-dev
5. webpack4.0 webpack4 最大的改动就是废除了CommonsChunkPlugin 引入了 optimization.splitChunks
如果你再webpack4中使用了weppack3的CommonsChunkPlugin 会出现以下报错: (运行配置文件 webpack3.config.js)
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks
webpack3.config.js:
 
var webpack = require('webpack')
var path = require('path') module.exports = {
mode: 'development',
entry: {
'pageA': './src/pageA'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunk: 2
})
],
devtool: 'source-map',
}

  

webpack4 配置更加简单,如果设置了 mode 为 production,那么webpack4 会自动开启 Code Splitting
6. webpack4内置的代码分割策略
a. 新的chunk是否被共享或者来自node_module的模块
b. 新的chunk体积在压缩之前是否大于30kb
c. 按需加载chunk的并发请求数量小于等于5个
d. 页面初始加载时的并发请求数量小于等于3个
7. 合理使用 Code Splitting
a. 基础类库 chunk-libs : 比如 vue + vuex + vue-router + axios 这类的全家桶,一旦立项升级频率不高,但是每个文件基本都需要依赖
b. UI组件库 chunk-common : 比如 element-ui 升级频率也不会高,单独打包原因是体积比较大
c. 低频组件 : 比如一些特定页面需要使用的第三方库文件--富文本编辑器等
d. 公用业务代码 : 比如vue的路由懒加载 component: () => import('./xxx.vue') webpack默认会将其打包成一个独立的bundle
针对如上需求可进行如下配置:
 
splitChunks: {
chunks: "all",
cacheGroups: {
libs: {
name: "chunk-libs",
test: /[\/]node_modules[\/]/,
priority: 10,
chunks: "initial" // 只打包初始时依赖的第三方
},
elementUI: {
name: "chunk-elementUI", // 单独将 elementUI 拆包
priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
test: /[\/]node_modules[\/]element-ui[\/]/
},
commons: {
name: "chunk-comomns",
test: resolve("src/components"), // 可自定义拓展你的规则
minChunks: 2, // 最小共用次数
priority: 5,
reuseExistingChunk: true
}
}
};

  

 
 

webpack4 自学笔记三(提取公用代码)的更多相关文章

  1. DirectX11笔记(三)--Direct3D初始化代码

    原文:DirectX11笔记(三)--Direct3D初始化代码 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737/article ...

  2. webpack4 自学笔记一(babel的配置)

    所有代码都可以再我的github上查看,每个文件夹下都会有README.md,欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree ...

  3. webpack4 自学笔记五(tree-shaking)

    全部的代码及笔记都可以在我的github上查看, 欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/ThreeS ...

  4. webpack4 自学笔记四(style-loader)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/css 引入- ...

  5. webpack4 自学笔记二(typescript的配置)

    全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typesc ...

  6. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

  7. 【C++初学者自学笔记三】哑元函数、缺省参数、内联函数(模块二,PS:需要用到重载函数)

    一,哑元函数:一个函数的参数只有类型没有名字的则这个参数称之为哑元.类似于void fun(int); 功能:1保持向前的兼容性,比方说我们需要做成一个成品,然后成品是会不断的更新第一代第二代,当我们 ...

  8. vue 自学笔记(三) 计算属性与侦听器

    一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...

  9. vue 自学笔记记录

    vue 自学笔记(一): 知识内容:  安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...

随机推荐

  1. Vue的路由设置

    一.路由基础介绍 1.什么是前端路由? 路由是根据不同的url地址展示不同的内容或页面 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务器根据url的不同返回不同的页面实现 ...

  2. Android学习之可滑动当前的Activity视图看见上一个活动的视图

    先看一下我的效果图吧: 好大的图啊!!! 百度音乐由一个很酷的功能,当前的UI可以滑动,然后看见上一个活动的UI,当时顿时觉得百度的牛人好多啊,能将如此前沿的技术应用到app上.当然如果你熟悉了And ...

  3. ASP.NET Web API 框架研究 核心的消息处理管道

    ASP.NET Web API 的核心框架是一个由一组HttpMessageHandler有序组成的双工消息处理管道:寄宿监听到请求接受后,把消息传入该管道经过所有HttpMessageHandler ...

  4. DXP常用有效的快捷操作记录

    1.在PCB中快速选中一个器件 1)  M+C+Enter将弹出元件对话框,移动一个元件后,在十字架光标 状态时按[Enter]键 2)M(Move)+M(Move)按下时,鼠标光标变成“+”后,点击 ...

  5. CefSharp 支持mp4

    效果图: 下载链接:创建wpf项目引用 如下:链接:链接: https://pan.baidu.com/s/1UCJmslLPSDph7VrYhXM9gw 密码: j3n4 链接: https://p ...

  6. .NET Entity Framework (with Oracle ODP.NET) -Code First

    上一篇文章介绍了.NET Entity Framework ,并演示了Model First模式,本文将继续讨论 Code First 模式的实现. 一.摘要 1.目标 本文验证了通过Oracle D ...

  7. jquery banner 轮播配置方法

    1 概述 Banner可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题.Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心.在以往很多项目中主要体 ...

  8. 【转】Windows Server 2016 安装 IIS 服务时提示指定备用源路径

    原文地址:http://www.codingwhy.com/view/973.html 在Windows Serever 2016中安装IIS的时候,遇到以下提示 是否需要指定备用源路径?一个或多个安 ...

  9. C++调用API获取当前时间

    #include <string> #include<iostream> #include<windows.h> #include <sstream> ...

  10. 面向对象多继承(c3算法)、网络基础和编写网络相关的程序

    一.面向对象多继承(c3算法) a.有多个父类先找左,再找右,如下示例: class A(object): pass class B(object): def f1(self): print('B') ...