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 相关文章推荐
javascript 定义初始化数组函数
Sep 07 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
了解JavaScript中let语句
May 30 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
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
一些关于PHP的知识
2006/11/17 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
酒店中秋节活动方案
2014/01/31 职场文书
公司门卫岗位职责
2014/03/15 职场文书
代办委托书怎样写
2014/04/08 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
具结保证书
2015/01/17 职场文书
实习介绍信模板
2015/01/30 职场文书
匿名信格式范文
2015/05/27 职场文书
公历12个月名称的由来
2022/04/12 杂记
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL