Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
zvenshy opened this issue Oct 30, 2019 · 3 comments
Closed

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

zvenshy opened this issue Oct 30, 2019 · 3 comments
Assignees
Labels
bug Something isn't working

Comments

@zvenshy
Copy link

zvenshy commented Oct 30, 2019

问题描述
使用uni-app初始化的项目,发现无法tree shaking

复现步骤
项目初始化流程

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 呢?

[或者可以直接贴源代码]

预期结果
能够shake掉无用代码

系统信息:

  • 发行平台:微信小程序

uni-app v2.3.7
uni-app cli v2.0.0-23720191024001

Environment Info:

System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Binaries:
Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
npmPackages:
@dcloudio/types: * => 0.4.1
@dcloudio/uni-app-plus: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/uni-app-plus-nvue: 0.0.1
@dcloudio/uni-app-plus-nvue-v8: 0.0.1
@dcloudio/uni-cli-shared: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/uni-h5: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/uni-helper-json: * => 1.0.3
@dcloudio/uni-mp-alipay: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/uni-mp-baidu: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/uni-mp-qq: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/uni-mp-toutiao: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/uni-mp-weixin: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/uni-stat: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/uni-template-compiler: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/vue-cli-plugin-uni: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/webpack-uni-mp-loader: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@dcloudio/webpack-uni-nvue-loader: 0.0.1
@dcloudio/webpack-uni-pages-loader: ^2.0.0-23720191024001 => 2.0.0-23720191024001
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-plugin-transform-vue-jsx: 1.0.0
@vue/babel-preset-app: 3.12.1
@vue/babel-preset-jsx: 1.1.1
@vue/babel-sugar-functional-vue: 1.0.0
@vue/babel-sugar-inject-h: 1.0.0
@vue/babel-sugar-v-model: 1.1.1
@vue/babel-sugar-v-on: 1.1.0
@vue/cli-overlay: 4.0.5
@vue/cli-plugin-babel: 3.5.1 => 3.5.1
@vue/cli-plugin-router: 4.0.5
@vue/cli-plugin-typescript: ^3.5.1 => 3.12.1
@vue/cli-plugin-vuex: 4.0.5
@vue/cli-service: ^4.0.0 => 4.0.5
@vue/cli-shared-utils: 3.12.1
@vue/component-compiler-utils: 3.0.0
@vue/preload-webpack-plugin: 1.1.1
@vue/web-component-wrapper: 1.2.0
mpvue-page-factory: 1.0.1
mpvue-template-compiler: 1.0.13
uni-h5-vue: 2.6.10
uni-mp-vue: 2.6.10
vue: ^2.6.10 => 2.6.10
vue-class-component: ^6.3.2 => 6.3.2 (7.1.0)
vue-hot-reload-api: 2.3.4
vue-loader: 15.7.1
vue-property-decorator: ^8.0.0 => 8.3.0
vue-router: 3.0.1
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.10 => 2.6.10
vue-template-es2015-compiler: 1.9.1
vuex: ^3.0.1 => 3.1.1
npmGlobalPackages:
@vue/cli: 3.9.3

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

@zvenshy
Copy link
Author

zvenshy commented Oct 31, 2019

补充:template 模板编译模式没有问题,是自定义组件编译模式会报错。应该是有坑。望修复

@zvenshy
Copy link
Author

zvenshy commented Nov 14, 2019

@zhetengbiji @fxy060608 @Wangyaqi 麻烦看下?

@fxy060608 fxy060608 self-assigned this Nov 21, 2019
@fxy060608 fxy060608 added the bug Something isn't working label Nov 21, 2019
@zhangchenna
Copy link

我也是遇到了同样的问题 Cannot read property 'id' of undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants