美文网首页
vue优化 | 减少打包组件|webpack externals

vue优化 | 减少打包组件|webpack externals

作者: LuckyJin | 来源:发表于2020-03-20 19:30 被阅读0次

    先放使用方法

    1、 vue.config.js配置

    module.exports = {
     configureWebpack: {
            externals: {
                'echarts': 'echarts',
                'qs': 'Qs',
                'element-ui': 'ElementUI ',
                "moment": "moment"
            }
       }
    }
    
    属性名 element-ui 指的是 import ElementUI from 'element-ui';
    属性值 ElementUI 指的是element-ui插件暴露出来的全局对象名。
    

    2、 在index.html文件引入CND (推荐一个cnd网站:[BootCDN](https://www.bootcdn.cn/))

    image.png image.png

    3、在vue中使用,使用require引入

    let echarts = require('echarts/lib/echarts');

    image.png

    webpack的externals

    官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

    怎么理解呢?
    有时我们希望我们通过script引入的库,如用CDN的方式引入的jquery,我们在使用时,依旧用require的方式来使用,但是却不希望webpack将它又编译进文件中。

    参考资料:
    外部扩展(externals)
    配置 externals 引入 cdn 资源

    相关文章

      网友评论

          本文标题:vue优化 | 减少打包组件|webpack externals

          本文链接:https://www.haomeiwen.com/subject/ckfsyhtx.html