webpack+react+antd脚手架优化的方法


Posted in Javascript onApril 02, 2018

在之前的文章中了解了webpack v4的特性,现在将知识用于实践,对之前写的一个react脚手架进行打包性能的优化。

优化类目

  1. 样式分离
  2. 第三方资源分离
  3. 区分开发环境
  4. 热更新
  5. 提取公共代码

1. CSS分离

npm install extract-text-webpack-plugin -D

webpack.config.js

将css、less、sass文件单独从打包文件中分离

+ let cssExtract = new ExtractTextWebpackPlugin({
+ filename: 'css.css',
+ allChunks: true
+ });
+ let sassExtract = new ExtractTextWebpackPlugin('sass.css')
+ let lessExtract = new ExtractTextWebpackPlugin('less.css')

在webpack.config.js中单独添加规则,

  1. test:匹配处理文件的扩展名的正则表达式
  2. include/exclude手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
{
 test: /\.css$/,
 use: cssExtract.extract({
 fallback: "style-loader",
 use: ['css-loader?minimize','postcss-loader'],
 publicPath: "/dist"
 }),
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
},
{
 test: /\.scss$/,
 use: sassExtract.extract({
 fallback: "style-loader",
 use: ["css-loader?minimize","sass-loader"],
 publicPath: "/dist"
 }),
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
},
{
 test: /\.less$/,
 loader: lessExtract.extract({
 use: ["css-loader?minimize", "less-loader"]
 }),
 include:path.join(__dirname,'./src'),
 exclude:/node_modules/
},

然后运行webpack命令时报错

compilation.mainTemplate.applyPluginsWaterfall is not a function

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

研究得出结论:webpack升级到v4然而响应的插件没有升级的原故。

解决方法:安装指定版本的依赖

"html-webpack-plugin": "^3.0.4"
"extract-text-webpack-plugin": "^4.0.0-beta.0"

resolve

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

resolve: {
 //引入模块的时候,可以不用扩展名
 extensions: [".js", ".less", ".json"],
 alias: {//别名
 "bootstrap": "bootstrap/dist/css/bootstrap.css"
 }
}

监听文件修改

webpack模式下使用,webpack-dev-server模式不用,可以将watch改为false

watchOptions: {
 ignored: /node_modules/,
 aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作,防止文件更新太快导致编译频率太高
 poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化,默认每秒询问1000次
}

提取公共代码

optimization: {
 splitChunks: {
 cacheGroups: {
 commons: {
  chunks: "initial",
  minChunks: 2,
  maxInitialRequests: 5, // The default limit is too small to showcase the effect
  minSize: 0 // This is example is too small to create commons chunks
 },
 vendor: {
  test: /node_modules/,
  chunks: "initial",
  name: "vendor",
  priority: 10,
  enforce: true
 }
 }
 }
 }

分离react react-dom ant公共代码

方法一:externals

在页面上引入第三方资源库,然后使用externals防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

<script src="https://cdn.bootcss.com/react/16.4.0-alpha.0911da3/cjs/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/cjs/react-dom-server.browser.production.min.js"></script>
externals: { 'react': 'React', 'react-dom': 'ReactDOM', // 提出ant design的公共资源, }

方法二:DLL

webpack+react+antd脚手架优化的方法

优化后手架地址

webpack+react+antd脚手架优化的方法

打包速度优化,打包文件细化,改造成功~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
vue axios请求超时的正确处理方法
Apr 02 #Javascript
JavaScript 日期时间选择器一些小结
Apr 02 #Javascript
vue计算属性及使用详解
Apr 02 #Javascript
vue小白入门教程
Apr 02 #Javascript
Angular父组件调用子组件的方法
Apr 02 #Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 #Javascript
微信小程序block的使用教程
Apr 01 #Javascript
You might like
基于mysql的bbs设计(一)
2006/10/09 PHP
php不用正则验证真假身份证
2013/11/06 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
什么时候需要进行强制类型转换
2016/09/03 面试题
node中使用shell脚本的方法步骤
2021/03/23 Javascript
大学生毕业自我鉴定范文
2013/09/19 职场文书
好家长事迹材料
2014/01/23 职场文书
社区母亲节活动方案
2014/03/05 职场文书
医药营销个人求职信
2014/04/12 职场文书
学校四群教育实施方案
2014/06/12 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
财产分割协议书范本
2014/11/03 职场文书
心理学培训心得体会
2016/01/22 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS