webpack打包后bundle.js文件过大的问题

由于webpack将所有的文件合并到一个js文件。因此打包后的文件过大,导致网络请求不畅。

今天尝试了一下webpack打包。结果打出来3.6M。因为之前在本地测试的原因,一直用的webpack -w的命令。

即监控入口文件有无改动,若有改动,则自动编译。

更改命令:webpack -p -w

webpack -p起到压缩的作用。

结果为1.4M。

查阅了一下相关资料。果断用nginx进行gzip压缩。

进入 /usr/local/etc/nginx目录下

打开编辑nginx.conf

配置如下:

  gzip  on;

gzip_min_length 1k;

gzip_buffers 16 64k;

gzip_http_version 1.1;

gzip_comp_level 6;

gzip_types text/plain application/javascript text/css application/xml;

gzip_vary on;

最后压缩到282k。。

时间: 2024-10-07 21:07:45

webpack打包后bundle.js文件过大的问题的相关文章

简要分析webpack打包后代码

原文地址:https://www.jianshu.com/p/0e5247f9975f 1.打包单一模块 webpack.config.js module.exports = { entry:"./chunk1.js", output: { path: __dirname + '/dist', filename: '[name].js' }, }; chunk1.js var chunk1=1; exports.chunk1=chunk1; 打包后,main.js(webpack生成的

性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看器)== == 介绍1:webpack-bundle-analyzer(可视化)== 将捆绑内容表示为方便的交互式可缩放树形图 如下效果图: 模块功能: 意识到你的文件打包压缩后中真正的内容 找出哪些模块组成最大的大小 找到错误的模块 优化它! 最好的事情是它支持缩小捆绑!它解析它们以获得实际大小的

unity Android 打包后读取 xml 文件

问题:    前天在做东西的过程中发现了一个让人很纠结的问题,为什么Unity 程序在PC上测试一点都没问题但是打包发布到Android后却无法读取XML文件. 通过查找自资料发现打包发不到安卓后的路径和PC上测试时的路径发生了变化,因此读取就出bug了. 那么解决方法很简单: 1,建立一个新工程 2,添加两个GUItext组件一个用于显示测试平台另一个用于显示读取到的XML数据, 如下: 3,该贴代码了 //-------------------------------------------

webpack打包后访问不到json文件

一.问题描述 在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败. 二.预期结果 能正常获取数据,渲染页面. 三.问题分析 因为webpack没有把json文件打包到dist目录,所以not found,即便加了json-loader也无用. 四.解决方案 手动把ajax数据目录拷贝到dist目录,先让页面完整出来.通常ajax数据是后端给前端一个接口地址,前端去访问的,所以

webpack打包后iconfont文件路径问题解决

在使用vue-cli创建vue项目时,可以自动生成webpack文件.使用 npm run build 即可打包发布生产文件,打包后的文件 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.hash.css文件中. 但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题. 解决方法: 在build/utils文件中的下图所示位置添加../../公共路径 这样打包的

webpack打包后不能调用,改用uglifyjs打包压缩

背景: 项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩. 项目的js中声明了一些全局变量 供其他js调用. 这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将js中的变量变成局部,不能供其他js调用. 因此弃用了webpack.选用了uglifyjs. 原因: webpack里也有用到uglifyjs的webpack版:uglifyjs-webpack-plugin. 打包途径: 打包源文件:dev文件夹下的js文件====>目标文件:js文件夹. 目录结

解决vue-cli webpack打包后加载资源的路径问题

vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: 前端精品教程:百度网盘下载 config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯

webpack: 简单分析 webpack 打包后的代码

编译后代码 /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module

vue打包后.woff字体文件路径问题处理

在执行 npm run build 命令打包后,如果出现 .woff 等字体文件找不到的情况 通过设置 vue-style-loader 打包前缀路径解决 原文地址:https://www.cnblogs.com/fanlu/p/11002744.html