全面提升页面加载速度

README.md

@@ -5,6 +5,8 @@ Apicloud + Vue2 + Vant（有赞前端）+ Webpack4打包，是一个采用Vue数
 
 > 已适配IOS8、Android 6以下低端机型，在此非常感谢[@ftlh2005](https://github.com/ftlh2005)同学的[Issue](https://github.com/grapewheel/avvw/issues/2#issue-404622819)
 
+> v1.1.0最新版本已全面提升页面加载速度，在此非常感谢[@Viarotel](https://github.com/Viarotel)同学的[Issue](https://github.com/grapewheel/avvw/issues/8)
+
 # 目录结构
 - dist 编译代码，连同config.xml上传到Apicloud发布App
 - src 源代码，所有开发在此开始，除pages、templates目录外，其他目录可随意增删

package.json

@@ -1,6 +1,6 @@
 {
   "name": "avvw",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Avvw apicloud framework",
   "main": "index.js",
   "scripts": {

src/templates/page.ejs

@@ -11,8 +11,8 @@
 <div id="page">
     <vue><!-- Vue here --></vue>
 </div>
-<script type="text/javascript" src="<%= htmlWebpackPlugin.options.vuejs %>"></script>
-<script type="text/javascript" src="fastclick.min.js"></script>
+<script type="text/javascript" src="./js/<%= htmlWebpackPlugin.options.vuejs %>"></script>
+<script type="text/javascript" src="./js/fastclick.min.js"></script>
 </body>
 </html>
 

webpack.base.js

@@ -4,7 +4,8 @@ const resolve = require('path').resolve
 
 module.exports = {
   output: {
-    path: resolve(__dirname, 'dist')
+    path: resolve(__dirname, 'dist'),
+    filename: './js/[name].js'
   },
   module: {
     rules: [
@@ -41,7 +42,7 @@ module.exports = {
     new VueLoaderPlugin(),
     new CopyWebpackPlugin([
       // './src/templates/api.js',
-      './src/templates/fastclick.min.js',
+      { from: './src/templates/fastclick.min.js', to: './js' },
       './src/templates/index.html'
     ])
   ],

webpack.dev.js

@@ -15,6 +15,7 @@ for (let file of files) {
         name: page,
         vuejs: 'vue.js',
         filename: `${page}.html`,
+        chunks: [page, 'runtime'],
         template: './src/templates/page.ejs'
     }))
 }
@@ -27,9 +28,14 @@ module.exports = merge(base, {
         contentBase: false,
         hot: true
     },
+    optimization: {
+        runtimeChunk: {
+            name: 'runtime'
+        }
+    },
     plugins: [
         new CopyWebpackPlugin([
-            './src/templates/vue.js',
+            { from: './src/templates/vue.js', to: './js' }
         ]),
         new HotModuleReplacementPlugin(),
         ...htmlWebpacks

webpack.prod.js

@@ -15,6 +15,7 @@ for (let file of files) {
         name: page,
         vuejs: 'vue.min.js',
         filename: `${page}.html`,
+        chunks: [page, 'runtime'],
         template: './src/templates/page.ejs'
     }))
 }
@@ -23,16 +24,14 @@ module.exports = merge(base, {
     mode: 'production',
     entry,
     optimization: {
-        splitChunks: {
-            chunks: 'async'
-        },
-        runtimeChunk: true,
-        namedChunks: true
+        runtimeChunk: {
+            name: 'runtime'
+        }
     },
     plugins: [
         new CleanWebpackPlugin(),
         new CopyWebpackPlugin([
-            './src/templates/vue.min.js',
+            { from: './src/templates/vue.min.js', to: './js' }
         ]),
         ...htmlWebpacks
     ]