vue项目打包优化及配置vue.config.js文件（实测有用）

Posted Moran墨染

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue项目打包优化及配置vue.config.js文件（实测有用）相关的知识，希望对你有一定的参考价值。

首先我们需要在根目录里创建一个vue.config.js

首先在文件中先写入

//打包配置文件
module.exports = 
    assetsDir: 'static',     //  outputDir的静态资源(js、css、img、fonts)目录
    publicPath: './',   // 静态资源路径（默认/，如果不改打包后会白屏）
    productionSourceMap: false, //不输出map文件
;

之后再使用CDN 加速优化(此代码在module.exports对象外面)

cdn加速可以去官网找到相应插件的路径 BootCDN官网

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';

// 本地环境是否需要使用cdn
const devNeedCdn = false

// cdn链接
const cdn = 
    // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    externals: 
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'axios': 'axios',
        'element-ui': 'ELEMENT'  //这里需要注意下
    ,
    // cdn的css链接
    css: [
		'https://unpkg.com/element-ui/lib/theme-chalk/index.css'  //引入element ui  css文件
    ],
    // cdn的js链接
    js: [
        'https://cdn.bootcss.com/vue/2.6.11/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js',
        'https://cdn.bootcss.com/axios/0.27.2/axios.min.js',
        'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js'
    ]

在module.exports对象里写入

    chainWebpack: config => 
        // ============注入cdn start============
        config.plugin('html').tap(args => 
            // 生产环境或本地需要cdn时，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        )
        // ============注入cdn start============
    ,

对图片文件进行压缩

下载依赖 这里如果用npm 可能会下载速度慢安装失败，建议使用cnpm

cnpm install image-webpack-loader --save-dev

之后继续在 chainWebpack里面新增以下代码

        config.plugins.delete('prefetch')
        config.module.rule('images')
            .test(/\\.(png|jpe?g|gif|svg)(\\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options( bypassOnDebug: true )

对代码压缩

先下载依赖 也建议使用cnpm

cnpm install uglifyjs-webpack-plugin --save-dev

在module.exports对象里写入

 configureWebpack: config => 
        if (isProduction || devNeedCdn) config.externals = cdn.externals
        // 代码压缩
        config.plugins.push(
            new UglifyJsPlugin(
                uglifyOptions: 
                    //生产环境自动删除console
                    compress: 
                        drop_debugger: true,
                        drop_console: true,
                        pure_funcs: ['console.log']
                    
                ,
                sourceMap: false,
                parallel: true
            )
        )
    ,

对公共代码抽离

在configureWebpack里继续写入

        // 公共代码抽离
        config.optimization = 
            splitChunks: 
                cacheGroups: 
                    vendor: 
                        chunks: 'all',
                        test: /node_modules/,
                        name: 'vendor',
                        minChunks: 1,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 100
                    ,
                    common: 
                        chunks: 'all',
                        test: /[\\\\/]src[\\\\/]js[\\\\/]/,
                        name: 'common',
                        minChunks: 2,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 60
                    ,
                    styles: 
                        name: 'styles',
                        test: /\\.(sa|sc|c)ss$/,
                        chunks: 'all',
                        enforce: true
                    ,
                    runtimeChunk: 
                        name: 'manifest'

最后整合起来vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')


// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';

// 本地环境是否需要使用cdn
const devNeedCdn = false

// cdn链接
const cdn = 
    // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    externals: 
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'axios': 'axios'
    ,
    // cdn的css链接
    css: [

    ],
    // cdn的js链接
    js: [
        'https://cdn.bootcss.com/vue/2.6.11/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js',
        'https://cdn.bootcss.com/axios/0.27.2/axios.min.js',
        'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js'
    ]


//打包配置文件
module.exports = 
    assetsDir: 'static',
    publicPath: './',
    productionSourceMap: false, //不输出map文件

    chainWebpack: config => 
        // ============注入cdn start============
        config.plugin('html').tap(args => 
            // 生产环境或本地需要cdn时，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        )
        // ============注入cdn start============

        // 在chainWebpack中新增以下代码
        config.plugins.delete('prefetch')
        config.module.rule('images')
            .test(/\\.(png|jpe?g|gif|svg)(\\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options( bypassOnDebug: true )

    ,

    configureWebpack: config => 
        if (isProduction || devNeedCdn) config.externals = cdn.externals
        // 代码压缩
        config.plugins.push(
            new UglifyJsPlugin(
                uglifyOptions: 
                    //生产环境自动删除console
                    compress: 
                        drop_debugger: true,
                        drop_console: true,
                        pure_funcs: ['console.log']
                    
                ,
                sourceMap: false,
                parallel: true
            )
        )

        // 公共代码抽离
        config.optimization = 
            splitChunks: 
                cacheGroups: 
                    vendor: 
                        chunks: 'all',
                        test: /node_modules/,
                        name: 'vendor',
                        minChunks: 1,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 100
                    ,
                    common: 
                        chunks: 'all',
                        test: /[\\\\/]src[\\\\/]js[\\\\/]/,
                        name: 'common',
                        minChunks: 2,
                        maxInitialRequests: 5,
                        minSize: 0,
                        priority: 60
                    ,
                    styles: 
                        name: 'styles',
                        test: /\\.(sa|sc|c)ss$/,
                        chunks: 'all',
                        enforce: true
                    ,
                    runtimeChunk: 
                        name: 'manifest'
                    
                
            
        
    ,

    devServer: 
        proxy: 
            '/api': 
                target: '线上接口地址',
                ws: true,
                changeOrigin: true,
                pathRewrite: 
                    '^/api': '/', // 根据之前vuejs的配置，用来拿掉URL上的（/api），但是暂时没有什么效果
                ,
            ,
        ,
    ,

;

最后我的vue项目由原来的12M减少到2M，启动也是成功

vue.config.js中的webpack配置，优化及多页面应用开发

参考技术A

目录

官方文档

vue-cli3以下版本中，关于webpack的一些配置都在config目录文件中，可是vue-cli3以上版本中，没有了config目录，那该怎么配置webpack呢？
3.x初始化项目后没有了build和config文件，如果你想对webpack相关内容进行配置，需要自己在根目录下(与package.json同级)创建一个vue.config.js文件，这个文件一旦存在，那么它会被 @vue/cli-service 自动加载。(但需要我们自己手动创建哦vue.config.js，跟package.json同级)

在配置中绝大多数都是（可选项）

常规操作还是用到了commjs语法

部署应用包的基本Url，默认/, 可以设置为相对路径./,这样打出来的包，可以部署到任意路径上

输出文件目录（打包后生成的目录，默认dist）

打包后生成的静态资源目录，默认“ ” ，也就是我们打包后的css，js等存放的位置

是否在保存的时候检查

生产环境的 source map，可以将其设置为 false 以加速生产环境构建，默认值是true

可通过 devServer.proxy解决前后端跨域问题（反向代理）

扩展： hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败

扩展：
Preload： 用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件。Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示；

Prefetch: 用于标记浏览器在页面加载完成后，利用空闲时间预加载的内容。Vue CLI 应用默认为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成prefetch提示。

webpack配置

扩展:

在这里configureWebpack和chainWebpack的作用相同，唯一的区别就是他们修改webpack配置的方式不同：

这里配置了全局sass 需要安装的依赖 sass-loader less-loader

由于 sass-loader 版本不同，loaderOptions 中的 additionalData 的键名也不同

vue-cli3中的webpack与vue多页面应用开发
相关参数:

封装

很好的pwa插件相关配置
pwa介绍及使用

当运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js;

上面已经提到过去掉打印的操作（console、debug）这里详细讲解一下

新版uglifyjs-webpack-plugin需写成以下方式

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。

和我们正常创建项目相同，这里通过vue-cli3脚手架进行创建

以上是关于vue项目打包优化及配置vue.config.js文件（实测有用）的主要内容，如果未能解决你的问题，请参考以下文章

vuecli3项目打包优化配置要点

Vue2.6.10(Vue-cli4)项目打包性能优化实践

Vue项目打包部署到Nginx服务器

Vue高级系列配置Vue脚手架-npm方法-vscode配置-vue.config.js-项目打包与发布-ESlint使用

补充基于vue-cli创建的项目进行打包优化

webpack打包优化