const { defineConfig } = require('@vue/cli-service') const path = require('path') // 路径处理方法 function resolve (dir) { return path.join(__dirname, dir) } const externals = [ { vue: 'Vue' }, { 'vue-router': 'VueRouter' }, { axios: 'axios' }, { vuetify: 'Vuetify' }...
configureWebpack: config=>{//生产环境下清除 console.logif(process.env.NODE_ENV === 'production') {return{ optimization: { minimizer: [newTerserPlugin({ sourceMap:false, terserOptions: { compress: { drop_console:true} } }) ] } } } } }4.使用 compression-webpack-plugin 开启 gzip 压缩 ...
// webpack配置 // 对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: (config) => { //修改文件引入自定义路径 config.resolve.alias.set('@', resolve('src')); }, //调整 ...
performance:false,// 关闭性能分析,提示速度 step5--开启vue-loader缓存 {test:/\.vue$/,loader:"vue-loader",// 内部会给vue文件注入HMR功能代码options: {// 开启缓存cacheDirectory: path.resolve( __dirname,"node_modules/.cache/vue-loader"), }, }, step6--现阶段详细的配置代码 constpath =requi...
这些在使用Vue Cli的项目中已经自动帮我们做好了,主要利用了optimization.splitChunks配置,但是当我们把这些公用的模块都堆在一个模块中,这个文件可能异常巨大(一般是app.js,首屏就会加载这个文件,引用的公共第三方库越多,这个文件越大),也是不利于网络请求和页面加载的。所以我们需要把这个公共模块再按照一定规则进一步...
VueCLI使用Webpack作为构建工具,我们可以通过配置vue.config.js文件来修改Webpack的配置,以实现代码压缩。 1. 创建vue.config.js文件 在Vue项目的根目录下,创建一个名为vue.config.js的文件。如果该文件已存在,请打开它。 2. 配置代码压缩选项 在vue.config.js文件中,我们可以使用configureWebpack选项来修改Webpack...
webpack5手动搭建vuecli webpack5搭建vuecli 话不多说,先上最终打包结果对比图: 原本使用vue脚手架写的项目,在没做优化的情况下,最终的打包结果: 段落引用使用webpack5自己手动搭建的vue脚手架,且做了代码优化后的最终打包结果: 做了什么优化? 使用compression-webpack-plugin进行http压缩...
module.exports={presets:['@vue/cli-plugin-babel/preset'],plugins:["@babel/plugin-proposal-optional-chaining"// 添加该插件]} 抽离重复文件合并 config.optimization.splitChunks({cacheGroups:{styles:{name:'styles',test:/\.(s?css|less|sass)$/,chunks:'all',priority:10},common:{name:'chunk-common...
// vue.config.js文件(vue cli3根目录下的文件,如果没有,可创建此文件,用于webpack配置) module.exports = { configureWebpack: { optimization: { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, cacheGroups: { vendor: { test: /[\\/]node_mo...
VueCli自带 cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中。 如果你遇到了编译方面的问题,记得先清缓存目录之后再试试看。 thread-loader 会在多核 CPU 的机器上为 Babel/TypeScript 转译开启。 hard-source-webpack-plugin 这个插件主要是利用缓存,提升二次启动和...