Venshy
Venshy
  • 发布:2019-10-30 16:56
  • 更新:2019-10-30 16:56
  • 阅读:2320

uni-app tree-shaking无效,请问怎么解决

分类:uni-app

问题背景

项目初始化流程

vue create -p dcloudio/uni-preset-vue my-project  
// 之后选择默认模板(typescript)

demo:

// src/src.ts  
export const a = "12345";  
export const b = "b12345";  
export const c = 3;  

// src/src1.ts  
export const aa = "a111111";  
export const bb = 22222;  
export const cc = 333333;  

// src/demo.ts  
import { a, b, c } from "@/src";  
import { aa, bb, cc } from "@/src1";  

export { a, b, c, aa, bb, cc };  

// src/App.vue  
    import { a } from "./demo";  

    console.log("TCL: a", a);  

期望的结果是 shake 掉 src/src1.ts 的代码,因为我并没有用到其中的代码。但不行。结果如下:

// 运行命令:yarn build:mp-weixin  
// dist/build/mp-weixin/common/vendor.js  
var r="a111111";e.aa=r;var o=22222;e.bb=o;var i=333333;e.cc=i

定位了一下发现修改 babel.config presets 即可

//babel.config.js  
module.exports = {  
  presets: [  
    [  
      "@vue/app",  // "@vue/cli-plugin-babel/preset"也行的  
      {  
        modules: false, // modules: 'commonjs' => false  
        useBuiltIns: process.env.UNI_PLATFORM === "h5" ? "usage" : "entry"  
      }  
    ]  
  ],  
  plugins  
};

本以为问题解决,结果乐极生悲。当依赖components时编译又有问题。代码如下

// src/compDemo.vue  
<template>  
    <div class="hello">  
        <h1>{{ msg }}</h1>  
        <p>  
            For a guide and recipes on how to configure / customize this project,  
            <br>check out the  
            <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.  
        </p>  
    </div>  
</template>  

<script>  
    export default {  
        name: "HelloWorld",  
        props: {  
            msg: String  
        }  
    };  
</script>  

// src/page/index/index.vue  
<template>  
    <view class="content">  
        <image class="logo" src="../../static/logo.png"></image>  
        <view>  
            <text class="title">{{title}}</text>  
        </view>  
        <comp-demo></comp-demo>  
    </view>  
</template>  

<script lang="ts">  
    import Vue from 'vue';  
    import compDemo from "../../compDemo.vue";  
    export default Vue.extend({  
        components: {  
            compDemo  
        },  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    });  
</script>  

报错信息如下:

TypeError: Cannot read property 'id' of undefined  
    at Object.keys.forEach.name (/Users/xxxx/my-project/node_modules/@dcloudio/webpack-uni-mp-loader/lib/plugin/generate-component.js:57:15)  
    at Array.forEach (<anonymous>)  
    at generateComponent (/Users/xxxx/my-project/node_modules/@dcloudio/webpack-uni-mp-loader/lib/plugin/generate-component.js:24:25)  
    at Promise (/Users/xxxx/my-project/node_modules/@dcloudio/webpack-uni-mp-loader/lib/plugin/index-new.js:84:11)  
    at new Promise (<anonymous>)  
    at compiler.hooks.emit.tapPromise.compilation (/Users/xxxx/my-project/node_modules/@dcloudio/webpack-uni-mp-loader/lib/plugin/index-new.js:72:16)  
    at _next2 (eval at create (/Users/xxxx/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:17)  
    at _err2 (eval at create (/Users/xxxx/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)  
    at callback (/Users/xxxx/my-project/node_modules/copy-webpack-plugin/dist/index.js:77:17)  
    at /Users/xxxx/my-project/node_modules/copy-webpack-plugin/dist/index.js:118:24  
error Command failed with exit code 1.

可以看出修改presets后,webpck-uni-mp-loader在执行时会出错

请问该如何实现tree shaking呢?

版本信息

"@dcloudio/uni-app-plus": "^2.0.0-23720191024001",  
"@dcloudio/uni-h5": "^2.0.0-23720191024001",  
"@dcloudio/uni-helper-json": "*",  
"@dcloudio/uni-mp-alipay": "^2.0.0-23720191024001",  
"@dcloudio/uni-mp-baidu": "^2.0.0-23720191024001",  
"@dcloudio/uni-mp-qq": "^2.0.0-23720191024001",  
"@dcloudio/uni-mp-toutiao": "^2.0.0-23720191024001",  
"@dcloudio/uni-mp-weixin": "^2.0.0-23720191024001",  
"@dcloudio/uni-stat": "^2.0.0-23720191024001",  

"@babel/plugin-syntax-typescript": "^7.2.0",  
"@dcloudio/types": "*",  
"@dcloudio/uni-cli-shared": "^2.0.0-23720191024001",  
"@dcloudio/uni-template-compiler": "^2.0.0-23720191024001",  
"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-23720191024001",  
"@dcloudio/vue-cli-plugin-uni": "^2.0.0-23720191024001",  
"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-23720191024001",  
"@dcloudio/webpack-uni-mp-loader": "^2.0.0-23720191024001",  
"@dcloudio/webpack-uni-pages-loader": "^2.0.0-23720191024001",  
"@vue/cli-plugin-babel": "3.5.1",  
"@vue/cli-plugin-typescript": "^3.5.1",  
"@vue/cli-service": "^4.0.0",  
2019-10-30 16:56 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复