webpack打包优化

197 阅读1分钟

问题:npm run build 时项目出现打包失败的情况,错误提示

image.png 分析原因:打包时有些文件包过大,导致node内存不足无法打包成功。
解决方法:vue.config.js 配置了

生产环境打包禁止生成 Source Map

Source Map 文件可以使浏览器能够像调试源代码一样调试被混淆压缩后的 JavaScript 代码,所以在非生产环境,Source Map 文件对于调试是有利的。

但是 Source Map 文件有一定的安全隐患,有心人士可以通过 Source Map 文件中的映射,更容易地还原出前端完整代码。

所以生产环境应该禁止输出 SourceMap,这样既可以加速生产环境的构建,又可以规避一部分信息安全问题。

Vue CLI 的 productionSourceMap 配置可以控制生产环境不输出 Source Map 文件:

module.exports = {
    // 如果你不需要生产环境的 Source Map
    productionSourceMap: false,
    }