vue开启gizp 怎么和 externals 一起使用
时间: 2023-09-01 10:02:50 浏览: 45
在Vue中启用gzip压缩和使用externals插件可以通过以下步骤完成。
1. 首先,确保已在项目中安装了相关的依赖。使用npm或yarn命令安装gzip和externals插件:
```
npm install compression-webpack-plugin --save-dev
npm install --save-dev vue-cli-plugin-externals
```
2. 在Vue项目的配置文件vue.config.js中进行以下配置:
```javascript
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css$/, // 匹配需要压缩的文件类型
threshold: 10240, // 超过此大小才会进行压缩,单位为字节
deleteOriginalAssets: false // 是否删除原文件
})
]
},
pluginOptions: {
externals: {
moduleType: 'window', // 类型为window,表示将依赖作为全局变量引入
globalName: 'lodash', // 依赖的全局变量名称
name: 'lodash', // 依赖的包名
replaceGlobalName: 'lodash' // 如果已存在全局变量,是否替换
}
}
};
```
3. 保存配置文件后,重新运行项目即可看到gzip压缩和externals插件生效。压缩后的文件将存储在dist目录中,并且externals插件会将指定的依赖作为全局变量引入到项目中。
使用这种方式可以有效地减小文件大小并提升加载速度,同时减少了对资源的加载和请求,提高了页面性能和用户体验。