webpack打包后的文件

参考vue脚手架的webpack配置,做一个项目后,会发现产出目录经常有app.js, vendor.js,manifest.js,*.js.gz, *.js.map生成。

因为第三方引用模块代码通常很大,而且在不引入新的模块之前基本上是不会变动的,所以我们需要将业务代码和第三方引用模块代码分开打包,并利用浏览器的缓存去提高应用程序的首屏加载速度。

一、app.js

程序入口文件打包压缩了。

二、vendor.js

通过提取公共模块插件来提取的代码块,vendor.js最大,因为其包含了vue整个框架的代码,以及webpack的模块化代码,node_modules。

三、manifest.js

manifest是在vendor的基础上,再抽取出要经常变动的部分,比如关于异步加载js模块部分的内容。

四、*.js.gz

gz文件,压缩文件,实现按需加载。

五、 *.js.map

map文件,映射文件,方便调试。

时间: 2024-08-30 14:12:37

webpack打包后的文件的相关文章

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

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

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 配置如下

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

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

webpack4+(打包后的文件分析+HTML插件+样式处理)

(1)打包后的文件分析 首先将打包后的文件进行适当删减,Ctrl+Shift+L可以同时选中所有相同结构内容 结构如下 (function(modules){ ... })( { ... } ) 分析可知本质为匿名函数即IIFE函数,执行时会传入后面函数执行符里的对象,接下来分析下传入对象 key指的是当前模块路径 value (2)HTML插件 (3)样式处理 . 原文地址:https://www.cnblogs.com/jianxian/p/12416586.html

webpack打包后访问不到json文件

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

create-react-app 打包后静态文件过大 webpack优化

在最近的项目里,页面和静态文件并不是很多的情况下,打包后发现产出的静态资源却很大. 1.关掉sourcemap 在config/webpack.config.js文件里,大概30几行的位置添加这样一句代码,这样做的作用是防止线上生成环境将源码一起打包部署. 2.将一些公共的库(比如antd)做一个缓存 splitChunks: { chunks: 'all', name: "vender", cacheGroups: { vender: { name: "vendor&quo

简要分析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打包后不能调用,改用uglifyjs打包压缩

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

webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc «(», expected punc «:»

webpack打包压缩 ES6 js..vue报错: ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected punc ?:? [js/test.js:1374,5] 解决方案: 配置babel,把配置放到文件[.babelrc]中 { "presets": ["es2015"] }