里面有一项就是私有化 sourceMap 部署:即 .map 文件与网站静态资源不在一起,通过外部 url 来访问 map 的一种方案,这样就可以在公司内网环境访问 map,方便调试排查,同时外网不会泄漏源码 该方案使用 webpack 官方的SourceMapDevToolPlugin来实现的,效果如下图所示: 如同往常一样,配置上了 SourceMapDevToolPlugin,然...
1.关闭productionSourceMap 首先,由于最新版的脚手架不自带配置文件了,先在根目录新建vue.config.js文件,关闭productionSourceMap,在vue.config.js中写入如下内容 module.exports = { productionSourceMap: false } 2.开启Gzip压缩 安装插件compression-webpack-plugin,打开代码压缩,npm install --save-dev compression-web...
1、使用filenameHashing,同时要求 index 的 HTML 是被 Vue CLI 自动生成的,会自动引入对应的js和css文件。 2、css.extract开启的话,会分离组件中的css部分,生成独立的css文件,而且会进行压缩,所以可能会导致css.sourceMap貌似失效的问题。因此,在使用css.sourceMap时,建议关闭css.extract。
cssSourceMap: sourceMapEnabled,//是否开启cssSourceMap, 关闭可以避免 css-loader 的 some relative path related bugs 同时可以加快构建速度。//传送门:https://vue-loader.vuejs.org/zh-cn/options.html#csssourcemapcacheBusting: config.dev.cacheBusting,//是否通过将哈希查询附加到文件名来生成具有缓存清除的源...
tips: 关闭sourcemap打包的速度可以提升很多 打包后你会发现,文件的下面会多一个后缀为.gz的文件,这个就是gzip格式的文件了,如果有这个文件,网站在和服务器连接的时候 会启用gzip格式文件,渲染速度就提升上去了。 19.01.20更 打包之后出现了gzip文件之后并不是就完事了。
正常打包一下,npm run build 大小为6.8M 对于移动端来说,项目有点大。(有一个很大的图片,占了5.4M) 减少包的体积的方法: 1.vue.config.js里面 添加配置 false, 1. productionSourceMap设置生产环境的 source map 开启与关闭,是用来调试页面的时候,方便定位位置。
生产环境下关闭productionSourceMap以及css的sourceMap提升打包速度 proxy开启多个代理 用到了.env文件中的环境变量 按照开发规范忽略部分文件后缀以及index.js 移除了preload脚本期望结果 可以使用vite进行开发和打包 仍保留webpack打包功能(因为项目太大,不能保证升级到vite后会不会有问题,所以仍希望webpack原本功能正常运行...
} }) } 试过,这样会覆盖vue-cli的productionSourceMap设置,minimizer默认sourceMap是false,要让sourceMap为true,必须再配置里加上sourceMap配置 😓 {minimizer:[newTerserPlugin({sourceMap:true,terserOptions:{compress:{drop_console:true}}}
productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度 filenameHashing: false, //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) ...
// 开启 CSS source maps(默认false)线上关闭,测试和本地开启 sourceMap: isPro ? false : true, // css预设器配置项 loaderOptions: { sass: { // sass的公共方法和变量,需要预编译; prependData: ` @import "@/assets/css/global.scss";