WebPack 打包体积优化

最新推荐文章于 2023-09-11 10:32:26 发布

LuckilyMyGirl

最新推荐文章于 2023-09-11 10:32:26 发布

阅读量276

点赞数 2

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_52651045/article/details/120701052

版权

使用 CDN 方式减少包的体积
在 vue.config.js 文件中配置 externals

configureWebpack: (config) => {
  ...
  config["externals"] = {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts'
  }
}

// 或者

configureWebpack: {
  ...
  "externals": {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts'
  }
}

在 index.html 文件中, 添加 CDN

<!DOCTYPE html>
<html lang="">
  <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">
    <title><%= htmlWebpackPlugin.options.title %></title>
    # element-ui 的 css 文件
    <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
    # Vue
    <script src="//cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    # VueRouter
    <script src="//cdn.bootcss.com/vue-router/3.2.0/vue-router.js"></script>
    # axios
    <script src="//cdn.bootcss.com/axios/0.21.1/axios.js"></script>
    # element-ui 的 js 文件
    <script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <script src="//cdn.bootcss.com/element-ui/2.15.6/index.js"></script>
    <script src="//cdn.bootcss.com/element-ui/2.15.6/locale/zh-CN.js"></script>
    # echarts
    <script src="//cdn.bootcss.com/echarts/5.1.2/echarts.simple.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

使用案例:

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
    config["externals"] = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
      'echarts': 'echarts'
    }
  }
}

注: 引入的 CDN 的版本号一定要与 package.json 中配置的版本号一样

LuckilyMyGirl

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
WebPack 打包体积优化

使用 CDN 方式减少包的体积在 vue.config.js 文件中配置 externalsconfigureWebpack: (config) => { ... config["externals"] = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios': 'axios', 'element-ui': 'ELEMENT', 'echarts': 'echarts' }}// 或者co
复制链接

扫一扫