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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
微信小程序选择图片控件
Jan 19 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
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
JS实现打字游戏
2019/12/17 Javascript
python实现ping的方法
2015/07/06 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
薪酬专员岗位职责
2014/02/18 职场文书
艺术教育实施方案
2014/05/03 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
春晚观后感
2015/06/11 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书