vue-config.js

最新推荐文章于 2024-08-08 22:11:57 发布

原创最新推荐文章于 2024-08-08 22:11:57 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-cli3

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文探讨了Webpack的配置细节，包括设置应用名称、性能优化如限制入口点大小，以及使用StyleLint进行代码检查。同时，配置了Workbox生成Service Worker实现离线缓存，并针对图片进行了缓存策略的定制。虽然未启用多进程打包，但通过阈值和压缩率设置了资源处理条件。

configureWebpack: {
// provide the app’s title in webpack’s name field, so that
// it can be accessed in index.html to inject the correct title.
performance: {
maxEntrypointSize: 400000
},
name: name,
resolve: {
alias: {
‘@’: resolve(‘src’)
}
},
plugins: [
new StyleLintPlugin({
‘files’: [’**/*.{html,vue,css,sass,scss}’],
‘fix’: false,
‘cache’: true,
‘emitErrors’: true,
‘failOnError’: false
}),
// 暂时用不到多进程打包，得不偿失。
// new SpeedMeasurePlugin({
// module: {
// rules: [
// {
// test: /.js $KaTeX parse error: Expected 'EOF', got '}' at position 58: \dots // }̲ // ]\dots$ ’
),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
}) : () => {},
new WorkboxPlugin.GenerateSW({
// Do not precache images
exclude: [/.(?:png|jpg|jpeg|svg) $KaTeX parse error: Can't use function '\.' in math mode at position 169: … urlPattern: /\̲.̲(?:png|jpg|jpeg…$ /,
// Apply a cache-first strategy.
handler: ‘CacheFirst’,
options: {
// Use a custom cache name.
cacheName: ‘images’,
// Only cache 10 images.
expiration: {
maxEntries: 10
}
}
}]
})
]
},