export和export default中的知識點介紹（附範例）

這篇文章帶給大家的內容是關於export和export default中的知識點介紹（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

網路上有很多關於export和export default的文章，他們大部門都是只講了用法，但是沒有提到性能，打包等關鍵的東西。
大家應該能理解import * from 'xxx'會把文件中export default的內容都打包到文件中，而import {func} from 'xxx' 只會把文件中的func導入，這樣勢必export會比export default打包的少。看範例

utils.js

const func1 = () => {
    console.log('func1');
}

const func2 = () => {
    console.log('func2');
}

export default {
    func1,
    func2
}

index.js

import { render } from "react-dom";
import common from './common';

class Index extends Component {
  render() {
    common.func1();
    return (
      123456
    );
  }
}

render(<index></index>, document.getElementById('app'));

用這種export default的方法那麼打包的檔案會是怎麼樣的呢？我們看看

我們發現整個檔案被打包了

用另一種方​​式
utils.js

const func1 = () => {
    console.log('func1');
}

const func2 = () => {
    console.log('func2');
}

export {
    func1,
    func2
}

index .js

import { render } from "react-dom";
import {func1} from './common';

class Index extends Component {
  render() {
    func1();
    return (
      123456
    );
  }
}

render(<index></index>, document.getElementById('app'));

結果：

只打包了func1

綜上export default確實可能會打包更多不需要的內容，但是在某些場景用export default更好。
所以總結如下：

1.当文件存放着很多方法，变量不同场景需要引用不同方法，请用export
2.当类只有某几个方法，并且每次引用都需要用到里面的大部分方法，请用export default，
  毕竟还有方法提示
3.当值导出一个方法，类请用export default
4.如果一个文件只会被某一个其他文件的子文件，不会被其他文件引用，并且其中的方法都会被用到，
  考虑用export default。比如某个业务文件夹下的action.js，用的时候用import api from './action';
  方便识别，不用重复在import的{}中添加，也可以用方法提示。
4.如果一个文件兼有以上需求 可以同时export和export default

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript教程視頻欄目！

以上是export和export default中的知識點介紹（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！