Use Firebase from CDN - UedaTakeyuki/vue-faui-user-fe2 GitHub Wiki
Add follwing links:
- google font css
- google font iconf
- material icons
- firebase and vuetify
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-faui-user-fe-sample</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<!--vuetify-->
<!--<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
remove vuetify-loader as follow:
yarn remove vuetify-loader
// https://medium.com/js-dojo/how-to-reduce-your-vue-js-bundle-size-with-webpack-3145bf5019b7
// https://github.com/firebase/firebase-js-sdk/issues/2241
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: (config) => {
// https://qiita.com/uturned0/items/5fdf2d92548274fe56e3
// https://rinoguchi.net/2020/05/vue-firebase-reduce-bundle-size.html
// https://stackoverflow.com/questions/66179210/how-to-externalize-a-lib-with-vue-cli
config.externals({
firebase: 'firebase',
'firebase/auth': 'firebase',
firebaseui: 'firebaseui',
vue: 'Vue',
vuetify: 'Vuetify',
'vuetify/lib': 'Vuetify',
})
}
}