webpack生产的vendor.js太大，开发时编译太慢？

最新推荐文章于 2023-05-04 10:35:05 发布
最新推荐文章于 2023-05-04 10:35:05 发布
阅读量382 收藏
点赞数
文章标签： webpack ViewUI
原文链接：http://www.cnblogs.com/saving/p/11580216.html
版权

webpack生产的vendor.js太大，开发时编译太慢？

 

本地也许还好，但是我用frp内网穿透开发微信的时候就悲剧了。1.6M下载速度18s。

周末搞好了gzip提升的成产环境的文件速度。

 

想起来dev-server应该也有压缩功能。

 

$ webpack-dev-server ... --compress

　　执行加个参数

--compress

 

转载于:https://www.cnblogs.com/saving/p/11580216.html

weixin_30278237
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
没有webpack.config.js如何配置less ？？
01-08
无论是vue或者react项目，你都找不到webpack.config.js，甚至没有原来的build文件夹，那我们如何配置less或者jq这种插件呢？接下来进入正题 配置less 1.安装less less-loader  打开我们的项目目录，打开CMD终端，...
webpack入门优化篇
IT水很深，路还很长
07-14 502
文中罗列出了十多种优化方式，大家可以结合自己的项目，选择适当的方式进行优化。这些Webpack插件的源码我大多也没有看过，主要是结合Webpack官方文档以及项目实践，在验证后输出了本文，如果文中有错误的地方，欢迎在评论区指正。 鉴于前端技术变更迅速，祭出本篇文章基于Webpack的版本号: ├── webpack@4.41.5 └── webpack[email protected] 本文对应的项目地址(编写本文时使用)供参考：https://github.com/YvetteLau/... ...
webpack-vendor优化
qq_39189369的博客
04-27 2953
vendor 提取公共方法 如图：（页面初始首屏加载需要大概20s时间,wc,谁会等!） 优化后:(5m-> 800k,加载有了质的飞越) 修改操作如下: 换成cdn加载:(注：cdn可以减少vendor的压力，但一旦没有网络，那就呵呵咯) 在webpack.base.conf.js的nodule的rules 加上/node_module...
webpack知识点整理
MingleHDU的博客
11-15 203
官网中，将webpack定义为： 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 入口Entry 入口指示一个入口起点（或多个入口起点）。默认值为 ./src。是构建依...
Webpack---性能优化，chunk.vendors.js体积过大
qq_45387575的博客
05-04 853
资源加载优化通过配置externals，来减少该体积。
Webpack打包和优化
aliyun3的博客
04-19 3351
webpack打包优化分为两部分，一部分是大小优化，另一部分是速度优化。 大小优化 1.CommonsChunk 前端构建项目中，为了提高打包效率，往往将第三库与业务逻辑代码分开打包，因为第三方库往往不需要经常打包更新。webpack建议使用CommonsChunk 来单独打包第三方库： module.exports = { entry: { vendor: ['react','react-dom'], app: "./main", }, .
webpack教程之webpack.config.js配置文件
10-19
本篇文章主要介绍了webpack教程之webpack.config.js配置文件 ，具有一定的参考价值，有兴趣的可以了解一席
使用webpack搭建pixi.js开发环境
11-20
本文介绍怎么使用webpack搭建pixi.js游戏的开发环境，怎么配置babel将ES6+代码最终转换为ES5，怎么利用gulp将webpack和其他脚本粘合一起优化项目并最终发布项目。 前提 需要会简单使用nodejs，了解package.json，...
webpack.config.js配置文件
06-19
最近刚学的webpack3.0，从零到一套相对比较齐全的配置
webpack.config.js 自定义
02-08
webpack.config.js 自定义
webpack5优化学习（二）——如何编译提速
akatukijohi的博客
03-27 1386
编译提速 缩小查找范围 extensions require和import的时候可以省略扩展名，然后查找文件时的先后顺序会根据extensions的配置进行 比如： resolve: { extensions: ['.js', '.jsx', '.json'],//指定文件的扩展名,找不到会报错 } alias 配置别名 比如，当你想直接用【import “bootstrap”】或者【require(“bootstrap”)】引入bootstrap的css时，webpack.config.j
webpack编译速度过慢的一次优化 从 127s 到 10s
wuyujin1997的博客
12-27 6438
Intro 自己搭建了react开发环境，一步一步新增配置，测试代码运行。 在做完了“集成AntDesign组件库”这一步之后，编译速度变得很慢92s。 于是查找了好多优化webpack编译速度的方案。 优化点 很多个点(的配置)都会有影响。 以下列表中，禁用sourceMap这一条最有效(sourceMap生成花费了编译时间的80%以上)。 但没啥用，开发环境我还是得留着sourceMap方便调试 其他几条在我目前的项目(代码量还很少)中，优化效果不大。 最开始的编译时间： 不启用sourceMap
npm 编译慢_如何有效提升快应用(Webpack)编译速度
weixin_35941686的博客
01-13 3369
背景在开发快应用时，少不了构建操作：npm run build(官方 IDE 集成了这些操作，本质上也是调用同样方法)。这是因为快应用有自己的 DSL 语法，直接写出来，在底层不能识别，需要把业务代码编译成底层能运行的代码(感兴趣的同学，可在 build 文件夹查看编译后的代码产物)。整个过程就跟 Vue 和 React 工程的打包一样。等待的过程总是漫长，当项目越来越大的时候，难免还要花上点时间...
(转)：优化webpack打包vendor体积
xiaolu289的博客
10-25 1475
转载自：https://segmentfault.com/q/1010000008832754   1.使用externals选项，使用script标签引用公共库 externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios' } <script src="//cdn.boo...
前端一定要知道的 webpack 配置基础知识
我的专栏
06-13 793
一定要知道的 webpack 配置基础知识
解决使用vue+elementui组件采用webpack打包导致vendor过大的情况
热门推荐
qq_26026975的博客
02-26 2万+
1.如果你使用了webpack来打包你的vue项目，如发现你的vendor.js过大则可以参考本文的解决方案.2.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用element-ui等第三方库。后果就是你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载j...
8.webpack基本使用
相互学习 共同进步
05-16 605
Chunk是代码块的意思，webpack在执行构建的时候，会把多个模块合并为一个文件，该文件就称为Chunkwebpack会为每个生成的Chunk取一个名称，Chunk的名称和Entry的配置有关：（1）如果entry是一个string或array，就只会生成一个Chunk，这时Chunk的名称是main（2）如果entry是一个object，就可能会出现多个Chunk，这时Chunk的名称是object键值对里键的名称。
webpack性能优化
zl_Alien的博客
08-05 373
当我们不用cli，而是自己搭建项目架子的时候，会用到webpack构建我们的项目，在用webpack构建项目的时候，过长的打包编译时间和庞大冗余的代码会让我们感到头疼。所以优化webpack性能成为了不可或缺的一部分。下面我们一起来探讨webpack性能优化细节。 影响webpack性能的因素 如果我们在构建项目中使用了大量的loader和第三方库，会使我们构建项目的时间过长，打包之后的代码体积过大。于是乎，就遇到了webpack 的优化瓶颈,总结webpack影响性能主要是两个方面： 1 webpack.
webpack配置中关于entry对象vendor属性的问题
chizhonghang的博客
03-07 1531
（此仅为记录学习用，本文为转载文章，详细原文地址为：原文地址） 为什么要使用vendor属性？ 一般情况下，使用此属性的目的是为了方便开发调试，或者是部署到服务器时提高应用的访问速度。在webpack 的打包此文件过程中通常会根据文件的内容计算出一个hash值，并将该值加到文件名中，并配置一个长达一年的缓存控制。之所以这么做，是因为vendor.js中的内容基本上很少更新，当我们根据业务需求修改相...
使用webpack5从0搭建。 webpack配置分为三个文件webpack.dev.js webpack.common.js webpack.pro.js webpack.dev.js 开发环境配置 webpack.common.js 是公共配置文件 webpack.pro.js 生产环境配置 package.json 配置三个命令 serve 启动 对应配置webpack.dev.js build打包 对应配置webpack.pro.js 要求配置babel，eslint，dev-server, css-loader,scss-loader,post-loader,style-loader,css压缩，JS压缩，file-loader url-loader,clean-webpack-plugin, js多进程打包，
最新发布
06-06
好的，您的问题是如何使用webpack5从0搭建项目并配置开发环境和生产环境？ 首先，需要安装webpack和webpack-cli： ``` npm install webpack webpack-cli --save-dev ``` 然后，我们需要创建三个配置文件：webpack...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值