webpack4.0让编译速度飙升

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

github.com/NewPrototy.…

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

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

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

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

文章标题:webpack4.0让编译速度飙升

相关文章
express + mock 让前后台并行开发
在我们平时项目刚启动时,由于后台也是刚开始开发,我们前端往往在开发过程中没有数据和接口请求的,都要造一些假数据进去或者使用mock造一些数据进去,但是这样的话往往会偶合一些没用的代码进去。到时候还得删除。 前后需要先商量好数据格式,等等...
2018-06-05
jquery代码规范让代码越来越好看
最近学了jQuery,感觉这个jQuery是真的挺不错的,果然像他说的那样,少些多做!刚一入手感觉真是不错。但是写多了,就会发现这个代码一行居然能写那么长。而且可读性还不好。  有幸自己买了一本锋利的jQuery这本书。我就整理了下。到底在...
2017-03-20
webpack 换肤功能多主题/配色样式打包解决方案
色阶 本文主要详细介绍了,如何使用 webpack,打包多套不同主题的解决方案以及实践中所遇到的问题。 <a id=“more”></a> 起因 首先,简单的介绍一下什么是多主题,所谓多套主题/配色,就是我们很常见...
2018-04-23
详解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的proxyTable无效的解决方案
最近遇到这个需要单页访问跨域后台的问题。 遇到了网上很多人说的,proxyTable无论如何修改,都没效果的现象。 经过几轮测试,总结出一下几种解决方案: 1.(非常重要)确保proxyTable配置的地址能访问,因为如果不能访问,在浏览器...
2018-06-15
webpack入门必知必会
前言 这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推出。 首先什么是webpack?如果说它是一个打包工具那真的是有点大材小用了。我个人认为webpack是一个集前端自动化、模块化、组件...
2017-03-07
开箱即用的多页面webpack脚手架
最近接手一个新项目,公司官网,官网为了对爬虫友好,不合适做单页面,更不大适合用react,vue这样的框架。本来觉得几个简单的页面还需要配置webpack挺麻烦,直接ES5,css,html写写就ok,可是一旦下手开始写,离开了前端的各种得...
2018-05-16
WebPack基础知识详解
1、什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。...
2017-03-07
webpack全家桶+react全家桶项目实战(集成antd)
原文链接 项目开始前,我们先聊一聊关于项目的一些说明。该项目起始于2017年初,当时公司主要技术栈为gulp+angular,鉴于react的火热的生态,在公司决定研发bss管理系统时选用react开发,目的也是为react native打...
2018-02-26
回到顶部