解决 vendor.js 过大的问题

开启gzip压缩

安装插件 compression-webpack-plugin

npm install --save-dev compression-webpack-plugin@1.1.12

修改build文件夹中webpack.prod.conf.js文件,将asset改为filename；

if (config.build.productionGzip) {const CompressionWebpackPlugin = require('compression-webpack-plugin')webpackConfig.plugins.push(new CompressionWebpackPlugin({// asset: '[path].gz[query]',filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,minRatio: 0.8}))
}

设置config/index.js中productionGzip: true；

build: {index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',productionSourceMap: false,devtool: '#source-map',productionGzip: true,// 这里开启GzipproductionGzipExtensions: ['js', 'css'],bundleAnalyzerReport: process.env.npm_config_report}

成功从7MB压缩到1.4MB

解决 vendor.js 过大的问题相关推荐

解决HbuiderX将uni-app开发的项目运行到小程序编译后文件vendor.js太大的问题
分包分包分包!!!!! 直接略过网上一下简单操作如勾选运行时是否压缩代码,感觉并没有什么用! 众所周知,h5上运行正常的代码,犹豫兼容的原因,在编译为小程序后会出现种种问题.解决报错问题请转到链接[b ...
webpack来打包你的vue项目，如发现你的vendor.js过大
1.如果你使用了webpack来打包你的vue项目,如发现你的vendor.js过大则可以参考本文的解决方案. 2.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了 ...
uniapp 微信小程序打包 vendor.js过大导致打包超过2M
1.分包加载,小程序限制一个包2M,可以分9个子包,整包共计不能超出20M,这一步很简单,如果看文档感觉枯燥的可以参考uview框架的demo,因为这个demo就使用了小程序的分包机制,demo链接( ...
uniapp发布微信小程序vendor.js过大
1.分包加载,小程序限制一个包2M,可以分9个子包,整包共计不能超出20M,这一步很简单,如果看文档感觉枯燥的可以参考uview框架的demo,因为这个demo就使用了小程序的分包机制,demo链接( ...
解决uniapp 小程序 vendor.js过大大于500K 无法转换ES5问题
项目页面147个,编译后的vendor.js大小2.4M,导致无法正常转换ES5,导致sourcemap下载后都是分号;;;;;, 无法定位线上错误日志的文件位置. 第一步是最重要的,非核心页面做分包 ...
gulp-load-task 解决 gulpfile.js 过大的问题
当我们在项目中使用gulp来实现前端自动化时,常常因任务太多导致gulpfile.js越来越臃肿,增加后期维护/变更成本.在计算机科学领域中,分治可以将我们的项目变得井然有序.所以,我们利用这个理念, ...
解决微信小程序开发vendor.js文件超过500kb问题
解决办法: 目前查找到有两种解决办法 1.开发环境启用代码压缩.2.vendor.js的分包处理,目前第一种已经达到预期,仅记录下第一种方式. 1.开发环境启用代码压缩在build/webpack. ...
配置webpack中externals来减少打包后vendor.js的体积
背景在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积 ...
Angular 应用里的 vendor.js 是用来干什么的？
What is vendor file in angular? 以 SAP 电商云 UI 的 Angular 页面为例,这个 vendor.js 有超过 17 万行代码: 此文件包含导入您的应用程序 ...

解决 vendor.js 过大的问题

开启gzip压缩

解决 vendor.js 过大的问题相关推荐

最新文章

热门文章