优化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,到后来赢得宝 ...
随机推荐
- vue.config.js基础配置
const path = require('path') const UglifyPlugin = require('uglifyjs-webpack-plugin') module.exports ...
- C++手动调用析构函数无效问题排查
在学习C++的时候,都知道不要手动调用析构函数,也不要在构造函数.析构函数里调用虚函数.工作这么多年,这些冷门的知识极少用到,渐渐被繁杂的业务逻辑淹没掉. 不过,最近项目里出现了析构函数没有被正确地调 ...
- 获取impala下所有的数据库建表语句
方法一: 现在的导出还是有缺陷的,导出的文件中还是存在其他不必要的信息 #!/bin/bash ##获取数据库 databases=$(hive -e "show databases; ex ...
- 前端使用 node-gyp 构建 Native Addon
前端轮子千千万, 但还是有些瓶颈, 公司需要在前端调用自有 tcp 协议, 该协议只有 c++ 的封装版本. 领导希望可以直接调该模块, 不要重复造轮子. 实话说我对 C 还有点印象, 毕竟也是有二级 ...
- Python Flask学习笔记(1)
1.搭建虚拟环境 a. 安装 virtualenv : pip3 install virtualenv b. 建立虚拟环境 : 任意目录下建立一个空文件(我的是 Py_WorkSpace) ,在该文件 ...
- python_推导式
列表推导式 目的:方便的生成一个列表 格式: v1 = [i for i in 可迭代对象 ] v2 = [i for i in 可迭代对象 if条件]#条件为True菜进行append v1 = [ ...
- 如何低成本搭建dnslog服务器
DNSLog,简单来说,就是通过记录对于域名的DNS请求,通过dns请求这个相对"隐蔽"的渠道,来委婉地获取到想要获得的信息. 例如,在一个针对mysql数据库的注入中,如果没有回 ...
- shell编程expr表达式----传智播客的书linux编程基础中出现的问题
首先声明:本人是传智播客的粉丝,拥有他出的多本编程书籍,此文绝无诋毁抹黑之意. 但在linux系统编程第88页给出的while循环范例中,代码运行无法得到预期结果 原代码如下 #!/bin/sh su ...
- ACM-ICPC 2018 青岛赛区网络预赛 J. Press the Button(数学)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4056 题意:有一个按钮,时间倒计器和计数器,在时间[0,t]内, ...
- [Docker] Run a command inside Docker container
For example you are working in a backend project, you have setup Dockerfile: FROM node:10.16.0-stret ...