vue打包使用UglifyJsPlugin减少体积，以及使用cdn、路由懒加载减少加载时间

直接上代码了vue.config.jsconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = {publicPath: './',//文件名hashfilenameHashing: false,//生成source mapproductionSourceMap...

我可能码的是假代码

4124人浏览 · 2020-04-02 16:53:39

我可能码的是假代码 · 2020-04-02 16:53:39 发布

直接上代码了

vue.config.js

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

module.exports = {
  publicPath: './',
  //文件名hash
  filenameHashing: false,
  //生成source map
  productionSourceMap: false,
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '管理后台',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      //chunks: ['chunk-vendors', 'chunk-common', 'index']
      cdn: {
        js: [
          'https://cdn.bootcss.com/vue/2.6.11/vue.min.js',
          'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
          'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
          'https://cdn.bootcss.com/element-ui/2.13.0/index.js'
        ],
        css: [
          'https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css'
        ]
      }
    }
  },
  devServer : {
    proxy : {
      '/adapter/' : {
        target : 'http://localhost',
        changeOrigin : true,
        pathRewrite : {
        '^/adapter/' : '/'
        }
      }
    }
  },
  configureWebpack: config => {

    // 开发时也使用cdn是为了方便和版本统一 当然也可以本地时用node_modules，发布用cdn
    config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'element-ui': 'ELEMENT'
    }

    // 为生产环境修改配置
    if (process.env.NODE_ENV === 'production') {      

      config.plugins.push(
        // 使用UglifyJsPlugin去掉console 可以略微降低文件大小
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_debugger: true,
              drop_console: true,  //生产环境自动删除console
            },
            warnings: false,
          },
          sourceMap: false,
          parallel: true //使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
        })
      );
    }
  }
  
}

index.html修改

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <% for (var i in htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>
    <% for (var i in htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></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>
    <!-- built files will be auto injected -->
  </body>
</html>

vue-router懒加载

const Router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'router-link-active',
  linkExactActiveClass: 'router-link-exact-active',
  routes: [
    {
      path: '/test/index',
      name: 'test-index',
      component: resolve => require(['@/components/children/test/index.vue'], resolve)
    }
  ]
});

没了，注释写的挺清楚了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^