webpack4.0让编译速度提升200%

2018-06-13 admin

前端开发一个crm项目的时候,因为项目内容比较庞大,导致webpack编译和打包都巨慢,实在是影响开发效率,所以着手升级webpack。

webpack4-es6-react是一个全新的基于webpack4、react16、es6、antd-mobile的前端架构实现方案,默认是antd-mobile,也可以自定义配置ui框架如:antd

功能

  • 编译速度快(使用happypack插件实现多线程执行任务)
  • 按需加载(不同页面文件单独压缩)
  • hash指纹(js、css文件自动添加版本号)
  • es2015
  • 支持less、stylus
  • 图片体积小支持base64压缩
  • 支持svg解析
  • 支持自定义打包文件的目录
  • 支持热更新
  • 支持打包输出map文件
  • 支持打包压缩文件

使用版本

  • webpack 4.7.0
  • react 16.4.0
  • react-dom 16.4.0

目录结构

.
├── webpack.config  --------------------- webpack相关配置
├── package.json  --------------------- 项目配置
├── README.md  ------------------------ 说明文件
└── src  ------------------------------ 源码目录
    ├── index  -------------------------- 入口文件
    ├── index.html  -------------------------- html入口文件
    ├── components  ------------------- 业务模块集合目录
    ├── images  ----------------------- 图片资源目录
    └── pages  ------------------------ 页面集合目录
        └── App  --------------------- 某一个页面
            ├── App.js  ------------- 页面入口文件
            └── App.css  -------- 页面样式

克隆

git clone https://github.com/NewPrototype/webpack4-es6-react.git

安装依赖

npm install 

编译

npm run start (开发模式)

默认浏览器会自动打开 http://localhost:9999,编译完成

打包

npm run build (生产模式)

package.json

package.json- script 参数解析

  • –open 打开浏览器
  • –color webpack输出信息颜色
  • –hot 热更新
  • –inline 热更新的方式
  • –mode development(开发模式) || production (生产模式)
  • –profile webpack 运行信息

webpack.config.js

const { argv } = process;
let env = 'development'; //默认是开发模式
argv.forEach(v => {
  if (v == 'production') {
    env = 'production';
  }
});
开发模式
  • 无需map文件
  • 无需压缩css,js
  • 启动多线程执行编译任务
生产模式
  • 生成map
  • 压缩文件
  • 自动添加hash版本号(解决缓存问题)
速度
  • 编译从8秒提升到1.5秒左右

    Hash: 7e97185183a8397d60dc
    Version: webpack 4.12.0
    Time: 14830ms
    Built at: 2018-06-11 11:20:01
    
  • 热更新速度从1秒到0.1秒左右

    Hash: df56e41b7815ca326b9e
    Version: webpack 4.12.0
    Time: 758ms
    Built at: 2018-06-12 15:27:47
    

todoList

  • 按需加载路由
  • 输出 webpack编译json,分析编译时间
  • 支持多入口
  • react-redux一键生成模版
  • 支持axios
  • 提高webpack编译速度(一直在持续…)

gitHub

https://github.com/NewPrototy…

原文链接:https://segmentfault.com/a/1190000015263836

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33917.html

文章标题:webpack4.0让编译速度提升200%

相关文章
详解JS: reduce方法实现 webpack多文件入口
1. reduce 方法介绍 1.1 简单场景 reduce 函数的设计意图就是方便进行叠加运算: var arr = [0, 1, 2, 3]; // reduce 实现累加 var total = arr.redu...
2017-03-17
Webpack+Vue如何导入Jquery和Jquery的第三方插件
创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default...
2017-03-16
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
webpack入门必知必会
前言 这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推出。 首先什么是webpack?如果说它是一个打包工具那真的是有点大材小用了。我个人认为webpack是一个集前端自动化、模块化、组件...
2017-03-07
WebPack基础知识详解
1、什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。...
2017-03-07
JavaScript 详解预编译原理
JavaScript 预编译原理 今天用了大量时间复习了作用域、预编译等等知识 看了很多博文,翻开了以前看过的书(好像好多书都不会讲预编译) 发现当初觉得自己学的很明白,其实还是存在一些思维误区 (很多博文具有误导性) 今晚就整理了一下凌乱...
2017-02-22
用JavaScript实现让浏览器停止载入页面的方法
本想弄个判断页面载入时间,过长就不加载特效的JavaScript代码,不过还是有点缺陷,这里就记录下来吧。 IE浏览器用document.execCommand(“Stop”),Chrome和Firefox用window.stop()(顺便...
2017-03-01
性能优化之代码优化页面加载速度
页面代码的优化对于页面加载速度也有不小的影响,最广为人知的: HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,JavaScript的引入放在页面尾。 其次还有...
2017-03-14
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
webpack 换肤功能多主题/配色样式打包解决方案
色阶 本文主要详细介绍了,如何使用 webpack,打包多套不同主题的解决方案以及实践中所遇到的问题。 <a id=“more”></a> 起因 首先,简单的介绍一下什么是多主题,所谓多套主题/配色,就是我们很常见...
2018-04-23
回到顶部