vue-cli项目的webpack打包优化

最新推荐文章于 2024-10-29 14:42:04 发布

一个巨蟹座的前端

最新推荐文章于 2024-10-29 14:42:04 发布

阅读量1.4k

点赞数 4

分类专栏： vue js 文章标签： webpack vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_47813845/article/details/121249622

版权

vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

24 篇文章

订阅专栏

webpack

路由异步加载

Vue项目使用的是虚拟路由，页面内容是有vue-router配置的路由链接来访问的，SPA单页面应用开发，适合开发后台系统，但是对搜索引擎不友好。

搜索引擎是靠页面的链接来爬取内容，然后收录进去搜索引擎数据库的，而Vue打包以后的项目只有一个页面，所以其中的内容搜索引擎无法收录，所以后期要进行SEO优化。

因此当项目的vue组件很多的时候，打包以后的首屏渲染优化就是一个非常重要的问题，改善性能，提高加载打开速度，就是很重要的一点。

默认es6引入

当组件过多时，加载就会变慢，打包以后的app.js文件体积会非常大，所以路由文件建议使用官方推荐写法。

1、import example from '../components/example.vue'

vue官方推荐

使用import把组件分割成一个个小的单独的文件，缩小文件体积。

1. <script>
        const Label = ()=>import('../center/page/Label.vue')
        export default {
        components: {
            Label,
        },
    </script>
2.  <script>
        export default {
        components: {
            Label: ()=>import('../center/page/Label.vue')
        },
    </script>

vue-router的router使用懒加载方式

{
    path:'/home',
    name:'home',
    component:resolve=>require(['@/component/home'],resolve)
}
也可以使用下面的写法
{
    path:'/home',
    name:'home',
    component:()=>import('@/component/home')
}

Ant Design of Vue组件优化

对Ant Design of Vue这种UI框架的优化，我们可以使用按需加载。对于我们的项目来说，很多组件都是多余的，会无形中加大加载时间和项目打包后的体积，所以使用下面这种按需引入的方法可以有效解决这个问题。

按需引入

1.从yarn中安装并引入antd-design-vue

yarn add ant-design-vue

在main.js中引入所需要的组件，实例如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Button,Table } from 'ant-design-vue';
Vue.config.productionTip = false
Vue.component(Button.name, Button)
Vue.component(Table.name, Table)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.安装babel-plugin-import

babel-plugin-import是一个用于按需加载代码和样式的组件

yarn add babel-plugin-import --dev

修改babel.config.js文件，配置babel-plugin-import

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
};

然后在组件中使用你所在main.js中注册的组件即可。

启动如果报错，检查是否安装的有less和less-loader

less-loader版本大于5.0以上

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },
};

less-loader大于6.0以上

module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true,
                },
            },
        },
    },
}

gzip压缩

如果nginx服务器开启gzip，会将静态资源在服务器进行压缩，压缩包传输给浏览器后，浏览器在进行解压使用，这大大提高了网络传输的效率，尤其是对js，css这类文本的压缩。

首先安装一个插件

yarn add compression-webpack-plugin

接下来是在vue.config.js中配置这个插件，配置如下

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  //将部署应用程序包的基本URL（baseUrl在Vue CLI 3.3之前称为）
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "assets", // 静态资源目录 (js, css, img, fonts)
  productionSourceMap: false, // 生产环境 sourceMap，不生成map文件
  lintOnSave: false,//关闭eslint
  devServer: {
    open: true,
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') { //判断是生产环境
      return{
        plugins: [
          new CompressionPlugin({
            algorithm: 'gzip',//开启gzip
            test: /\.js$|\.html$|.\css/, // 匹配文件名
            threshold: 10240, // 对超过10k的数据压缩
            deleteOriginalAssets: false // 不删除源文件
          })
        ]
     }
   }
 }
}

优化lodash

安装lodash-webpack-piugin插件

yarn add lodash-webpack-plugin

在vue.config.js中配置这个插件

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return{
        plugins: [
            new LodashModuleReplacementPlugin(),//优化lodash
        ]
    }
  }
}

图片压缩

vue正常打包之后一些图片文件很大，使打包体积变大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

安装image-webpack-loader

yarn add image-webpack-loader --dev

在vue.config.js中配置

module.exports = {
    productionSourceMap: false,
    chainWebpack: config => {
        // ============压缩图片 start============
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
        // ============压缩图片 end============
    }
}

cdn配置

1.在vue.config.js最上边写入：

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

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

// cdn链接
const cdn = {
    // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter'
    },
    // cdn的css链接
    css: [],
    // cdn的js链接
    js: [
        'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
        'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
        'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
    ]
}

2.在vue.config.js的module.exports的chainWebpack中写入：

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

在vue.config.js 的module.exports的configureWebpack中写入：

configureWebpack: config => {
    // 用cdn方式引入，则构建时要忽略相关资源
    if (isProduction || devNeedCdn) config.externals = cdn.externals
}

4.在public中的index.html写入：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <!-- 使用CDN的CSS文件 -->
        <% for (var i in htmlWebpackPlugin.options.cdn &&
        htmlWebpackPlugin.options.cdn.css) { %>
        <link
            href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
            rel="stylesheet"
        />
        <% } %>
        <!-- 使用CDN的CSS文件 -->
        <title>cli3_base</title>
    </head>
    <body>
        <noscript>
            <strong
                >We're sorry but cli3_base doesn't work properly without
                JavaScript enabled. Please enable it to continue.</strong
            >
        </noscript>
        <div id="app"></div>

        <!-- 使用CDN的JS文件 -->
        <% for (var i in htmlWebpackPlugin.options.cdn &&
        htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
        <% } %>
        <!-- 使用CDN的JS文件 -->

        <!-- built files will be auto injected -->
    </body>
</html>

5.在src/router.js中修改

将Vue.use(Router)改为if (!window.VueRouter) Vue.use(Router)

6.重启项目

7.现在配置的是开发环境，在浏览器的network下的js中是看不到的。如果想查看，请将vue.config.js里面的devNeedCdn修改一下：

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

8.启动项目，然后浏览器查看Network

代码压缩

安装插件

yarn add uglifyjs-webpack-plugin --dev

在vue.config.js中引入依赖

// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

在vue.config.js的module.exports的configureWebpack里面新增

// 生产环境相关配置
if (isProduction) {
    // 代码压缩
    config.plugins.push(
        new UglifyJsPlugin({
            uglifyOptions: {
                //生产环境自动删除console
                compress: {
                    warnings: false, // 若打包错误，则注释这行
                    drop_debugger: true,
                    drop_console: true,
                    pure_funcs: ['console.log']
                }
            },
            sourceMap: false,
            parallel: true
        })
    )
}

公共代码抽离

在vue.config.js的module.exports的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'
            }
        }
    }
}