分类：webpack

webpack配置学习

resolve

resolve.extensions

extensions:[‘.js’,’.vue’,’.json’],

我们在路由中引入组件时可以这样import Hello from ‘@components/Hello’;

resolve.alias

alias:{
    'element-ui': path.resolve(__dirname, '../')
}

resolve.modules

modules: [‘node_modules’]在引入的时候就不用

import ‘node_modules/util’,可以用

import ‘util’;

环境变量

静态环境变量的创建

在.env文件中

VUE_APP_API_BASE_URL=/api

动态环境变量的创建

在vue.config.js

const moment = require('moment');
process.env.VUE_APP_BUILD_TIME = moment().format('YYYY-M-D HH:mm:ss');

环境变量的使用

在html代码中

<span style="display: none;">ver:<%= VUE_APP_VERSION %>;build-time:<%= VUE_APP_BUILD_TIME%>;build-user:<%=VUE_APP_BUILD_USER%></span>

在vue代码中

data() {
    return {
      // 公钥
      publicKey: process.env.VUE_APP_PUBLIC_KEY,

    };
  },

在js中

const baseURL = process.env.VUE_APP_API_BASE_URL;

webpack

cdn加速

文章作者由zhuishao
发布日期 2020年10月10日
cdn加速有1条评论

这是一篇长期更新的文章，遇到能加速的东西就会记录下来

vue，vuex,vue-router

在public文件中的index.html中

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

在vue.config.js文件中

module.exports = {
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex'
        }
    }
}

moment

<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>

module.exports = {
    configureWebpack: {
        externals: {
            'moment': 'moment',
        }
    }
}

jsencrypt

<script src="https://cdn.bootcdn.net/ajax/libs/jsencrypt/3.0.0-rc.1/jsencrypt.min.js"></script>

module.exports = {
    configureWebpack: {
        externals: {
           'JSEncrypt': 'jsencrypt',
        }
    }
}

lodash

module.exports = {
    configureWebpack: {
        externals: {
           'lodash': '_',
        }
    }
}

标签 cdn

webpack

vue项目打包优化

体积太大，首次加载慢怎么办？

ant design组件按需加载（小项目或项目刚开始可以搞搞）

下载插件

npm i -D babel-plugin-import

babel.config.js

  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
    ],
  ],

main.js去掉以下内容

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);

最后引入ant-design组件

import Vue from 'vue';
import {
  Button, Form, Input, Select, Breadcrumb, Steps,
} from 'ant-design-vue';
Vue.component(Button.name,Button);
...

ant-design/icon按需加载（项目小或项目刚开始可用）

在node_modules中查看ant-design-vue的package.josn用的是什么版本的图标。

qi ye wei xin jie tu 16015405657930 1024x558 - vue项目打包优化

再看node_modules中是否有该文件

qi ye wei xin jie tu 16015413237616 1024x538 - vue项目打包优化

若没有该文件，下载它

npm install --save @ant-design/icons@2.1.1

创建一个文件antdIcon.js,里面导出需要的图标


export { default as EyeOutline } from '@ant-design/icons/lib/outline/EyeOutline';
export { default as EyeInvisibleOutline } from '@ant-design/icons/lib/outline/EyeInvisibleOutline';
export { default as CheckOutline } from '@ant-design/icons/lib/outline/CheckOutline';
export { default as CheckSquareOutline } from '@ant-design/icons/lib/outline/CheckSquareOutline';
export { default as ExclamationCircleOutline } from '@ant-design/icons/lib/outline/ExclamationCircleOutline';
export { default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill';
export { default as CheckCircleFill } from '@ant-design/icons/lib/fill/CheckCircleFill';
export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill';
export { default as ExclamationCircleFill } from '@ant-design/icons/lib/fill/ExclamationCircleFill';
export { default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline';

export {};

在vue.config.js更改映射地址，使用上方的图标。

resolve: {
      alias: { '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/utils/antdIcon.js') },
    },

压缩moment.js

下载webpack

npm i -D webpack

在vue.config.js使用插件

 configureWebpack: {
    plugins: [new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)],
  },

经过这几个步骤后我们包的变化情况如下

qi ye wei xin jie tu 16013615003453 1024x129 - vue项目打包优化

qi ye wei xin jie tu 16014280846225 1024x75 - vue项目打包优化

qi ye wei xin jie tu 16014330398134 1024x188 - vue项目打包优化

包分拆

可以发现，其中还有一个包的体积比较大，我们可以看看他包含了什么东西

qi ye wei xin jie tu 16015429647760 1024x462 - vue项目打包优化

在vue.config.js加入分拆规则

configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vue_rsa: {
            test: /[\\/]node_modules[\\/](vue|jsencrypt)/,
            priority: -8,
          },
          library: {
            test: /[\\/]node_modules[\\/](lodash|moment)/,
            priority: -9,
          },
        },
      },
    },
  },

分拆后结果如下，时间变慢了，因为在外网，但是包的体积确实变小了。

qi ye wei xin jie tu 16015432335094 1024x169 - vue项目打包优化

分拆原理如下

关于webpack4.0打包代码分割optimization.splitChunks的配置详解

如何看包的情况

qi ye wei xin jie tu 16015436242449 1024x536 - vue项目打包优化

npm run build

点击打开report.html

qi ye wei xin jie tu 16015437516225 - vue项目打包优化

标签 vue, vue优化, webpack优化, 减少体积, 加快首次渲染, 包

webpack

如何使用webpack优化我们的项目

使项目更加合理

让项目兼容性更强

需要下载

    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",

webpack.config.js

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
            }
        ]
    }

.babelrc

{
  "plugins": [
    [
      "transform-runtime",
      {
        "polyfill": false
      }
    ]
  ],
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    "stage-2"
  ]
}

使项目加载速度更快

查看我们项目加载情况

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 plugins: [
        new BundleAnalyzerPlugin(),
    ],

代码压缩分割

optimization: {
    splitChunks: {
      chunks: 'async', // initial 对入口文件拆分 all都包括
      minSize: 30000, // 小于这个数不拆分
      minChunks: 1, // 引入次数必须大于等于这个数才拆分
      maxAsyncRequests: 5, // 动态加载的js最多被拆分成5分
      maxInitialRequests: 3, // 入口文件最多拆分成三分
      automaticNameDelimiter: '~', // 名称分隔符
      name: true, // 默认是chunk的名字通过分隔符分割
      cacheGroups: { // 缓存组
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10 // 默认优先级
        },
        default: { // 其他第三方代码
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true // 已经拆分出来的代码是否被重用
        }
      }
    }
  }

多设置一个入口来分割代码

 entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },

标签 analyse, babel, splitChunks, webpack