优化webpack打包速度方案
基本原理要么不进行打包;要么缓存文件,不进行打包;要么加快打包速度。
不进行打包方案:
1,能够用CDN处理的用CDN处理,比如项目引入的第三方依赖jquery.js,百度编辑器
先进行打包或者缓存然后引入到项目中不进行打包的
1,采用webpack插件:webpack.DllReferencePlugin ,将线上需要使用的包提前打包,引入到项目中
加快打包速度的方案
1,webpack-parallel-uglify-plugin 并行压缩
2,启用loader缓存比如babel-loader
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory=true',
include: [resolve('src'),resolve('test'), resolve('node_modules/webpack-dev-server/client')]
}
以上是目前项目中采用的,还有尝试性的方案
1,使用fast-sass-loader代替sass-laoder
2,减少webpack的寻址路径
3,使用模块化方案引入模块功能
4,升级webpack
5,升级node.js
6,使用cache-loader
优化webpack打包速度方案的更多相关文章
- 优化Webpack打包速度
1. Webpack 可以配置 externals 来将依赖的库指向全局变量,从而不再打包这个库,比如对于这样一个文件: import React from 'react'; console.lo ...
- 提升webpack打包速度
webpack打包文件体积过大,怎么提升速度? 借助webpack visualizer可视化插件,来看构建的情况.这个问题要具体情况具体分析,看看打包文件有哪些块头比较大,哪些不常改变,最好列一个l ...
- webpack打包速度和性能再次优化
一. 改单dll为双dll 因为上图原因,使用CommonsChunkPlugin时,导致其打包出来的vendors.js内的模块ID会因为其他文件引用模块数量的变化而变化. 所以现利用DllPlug ...
- 解决webpack打包速度慢的解决办法
技巧1 webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的.在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了 ...
- Webpack 打包优化之速度篇
在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...
- webpack打包性能分析
1. 如何定位webpack打包速度慢的原因 首先需要定位webpack打包速度慢的原因,才能因地制宜采取合适的方案,我们可以在终端输入: webpack --profile --json > ...
- Webpack 打包太慢? 试试 Dllplugin
webpack在build包的时候,有时候会遇到打包时间很长的问题,这里提供了一个解决方案,让打包如丝般顺滑~ 1. 介绍 在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 rea ...
- webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)
如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...
- Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
随机推荐
- JAVA 1.6锁状态转换
JVM 学不好 并发就学不好 面试问题 Object 有哪些方法 syn实现过程 wait notify 为什么要设计到Object上而不是接口?虽然可以 但是面向对象的思想 子类 object.wa ...
- 十七,k8s集群指标API及自定义API
目录 资源指标: Metrics-Server 资源指标: Metric-Server介绍 Metric-Server部署 下载yaml文件 因为有墙, 所以提前下载image镜像, 当然也可以手动修 ...
- 01_Hive简介及其工作机制
1.Hive简介 Hive是一个基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一个表.并提供类SQL查询功能, 可以将sql语句转换为MapReduce任务运行.其优点是学习成本低, ...
- XY//电容
X,Y电容都是安规电容,火线零线间的是X电容,火线与地间的是Y电容.它们用在电源滤波器里,起到电源滤波作用,分别对共模,差模工扰起滤波作用.安规电容是指用于这样的场合,即电容器失效后,不会导致电击,不 ...
- 在SqlServer和Oralce中创建索引
给表名A的字段A增加索引 SqlServer: if exists (select 1 from sysobjects where name='表名A' and type='u')and exists ...
- 【收藏】linux快速查找文件的技巧
有时候,我们需要在系统中查找文件,Linux有一个非常优秀的搜寻系统. 一般提到搜寻文件的时候,很多人第一反应是find命令,但其实find不是常用的,因为速度慢,而且毁硬盘.一般我们都先用where ...
- Ubuntu系统---安装搜狗输入法
Ubuntu_搜狗输入法 第一步: 1,下载搜狗输入法的安装包. 下载地址为:http://pinyin.sogou.com/linux/ ,如下图,要选择与自己系统位数一致的安装包,我的系统是64位 ...
- AtCoder Beginner Contest 132 F Small Products
Small Products 思路: 整除分块+dp 打表发现,按整除分块后转移方向如下图所示,上面的块的前缀转移到下面的块 代码: #pragma GCC optimize(2) #pragma G ...
- 基于IAP的STM32程序更新技术
引言 嵌入式系统的开发最终需要将编译好的代码下载到具体的微控制器芯片上,而不同厂家的微控制器芯片有不同的下载方式.随着技术的发展和应用需求的更新,用户程序加载趋向于在线编程的方式,越来越多的芯片公司提 ...
- Nginx的TCP/UDP调度器
安装nginx [root@proxy ~]# yum –y install gcc pcre-devel openssl-devel //安装依赖包 [root@proxy ~]# .tar.gz ...