zoukankan      html  css  js  c++  java
  • 前端工程资源小优化

    概述

    最近给vue项目优化了一下资源打包,有一些心得,记录下来,供以后开发时参考,相信对其他人也有用。项目使用vue-cli搭建的,所以优化方向是基于vue-cli3的。

    css按需加载

    项目使用的是element ui库,我们使用了element的自定义主题。但是我看见打包的时候打包了2份element ui库的css:app.css打包了一份,vendor.css也打包了一份。严格说来,element-ui库的样式应该打包进第三方css里面也就是vendor.css里面。

    查找原因,发现有如下配置:

    // babel.config.js
    module.exports = {
      presets: [
        '@vue/app',
      ],
      plugins: [
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: 'theme-chalk',
          },
        ],
      ],
    };
    
    // main.js
    import '../../theme/index.css';
    

    其中babel.config.js里面的配置是说,element-ui使用的style是element-ui库里面theme-chalk文件夹里面的样式;main.js里面的配置是说,导入自定义主题文件夹theme里面的样式。所以前者把element-ui库里面的css打包进了vendor.css,后者把自定义主题的css打包进了app.css。

    最后考虑到我们的需要是一定要使用自定义主题,所以做了如下修改:

    // babel.config.js
    module.exports = {
      presets: [
        '@vue/app',
      ],
      plugins: [
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: '~theme',
          },
        ],
      ],
    };
    

    意思是,element ui库使用自定义主题theme文件夹里面的样式。所以不会再把element ui库里面的css打包进vendor.css里面了。

    虽然还是有一点瑕疵,就是这样会使app.css很大,导致每次只要修改了一点点css,都要把element ui的css重新打包一次。但这也没办法,需要是一定要自定义主题。

    element-ui组件按需加载

    上面我们在babel.config.js里面已经配置了element ui组件的按需加载,但是在实际引入组件的时候我们引入了多余的组件,特别是time-picker和date-picker组件,占了很大体积,于是我检查了一遍,把多余的组件删除了。

    这里有必要提一下的是,如果你使用的是vue-cli3,那么在package.json里面加入如下指令:

    "report": "vue-cli-service build --report"
    

    然后运行npm run report,就可以在dist文件夹里面生成一个report.html,里面非常直观的显示出打包的js的组成成分和大小,对减少打包体积很有帮助。

    moment.js

    通过上面的指令npm run report,我们可以看到,moment.js的打包体积非常大,都快赶上element ui整个库了。于是我想办法减少moment.js的打包体积。

    通过You-Dont-Need-Momentjs可以看到好几个moment.js的替代库,但是由于它们都没有UTC的相关功能,而我们项目非常依赖moment.js的UTC功能,所以我们项目并不能采用这些替代库。

    最后只能在moment.js上想办法了,只能通过删减它里面的国际化内容来减少它的打包体积了。webpack官方也建议在使用moment.js的时候用ignorePlugin删除它的国际化部分

    具体方法如下,只需要在vue.config.js里面加入下面的配置就行了:

    const webpack = require('webpack');
    
    module.exports = {
      chainWebpack: config => {
        config
          .plugin('ignorePlugin')
          .use(webpack.IgnorePlugin, [{
            resourceRegExp: /^./locale$/,
            contextRegExp: /moment$/,
          }]);
      },
    }
    
  • 相关阅读:
    毕业季 | 如何做出99分的答辩PPT
    git: error setting certificate verify locations解决办法
    获取表格里面的内容
    MD5加密算法
    mybatis多条件批量删除
    layer.confirm
    DevExpress控件的GridControl实现行多选
    sz与rz命令
    @TableField的使用
    C# WinForm 中Label自动换行 解决方法
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/10446045.html
Copyright © 2011-2022 走看看